自带气泡提示的vue校验插件(vue-verify-pop)


Posted in Javascript onApril 07, 2017

本教程大家分享了自带气泡提示的vue校验插件,供大家参考,具体内容如下

安装

npm install vue-verify-pop

使用

VUE版本:1.x
必须在vue-cli生成的webpack模板环境中使用

一、在./main.js中执行全局配置

import vue from 'vue'
import verify from 'vue-verify-pop'
vue.use(verify)
// 以下配置非必须,按你的需求来
// 配置默认校验不通过时的提示信息
verify.errMsg = YourErroMsg
// 增加校验规则
verify.addRule('myRule', (v) => {return '校验不通过'})

二、在表单元素中配置校验规则

<!--待校验元素的pop容器-->
<pop>
 <!--该输入框内容为最多为两位小数的数字-->
 <input v-verify decimal-length="2">
</pop>

自带气泡提示的vue校验插件(vue-verify-pop)

ok,您已经完成了一个基础校验。气泡提示怎么样?丑的话自己用css改吧。。
当输入框失去焦点时会自动触发校验,如果校验不通过会出现气泡。再次输入气泡会消失

支持的校验规则(继承verify-base.js)

  • length: 校验文本长度
  • minLength: 校验文本最短长度
  • maxLength: 校验文本最长长度
  • maxNumber: 校验数字最大值
  • minNumber: 校验数字最小值
  • decimalLength: 校验小数位
  • number: 校验是否为数字
  • int: 校验是否为整数
  • phone: 校验是否为手机号
  • idCard: 校验是否为身份证号
  • bankCard: 校验是否为银行卡号
  • email: 校验是否为电子邮件地址
  • verifyCode: 校验是否为6位数字验证码
  • canBeNull: 当参数为空时跳过校验,不会执行后面的校验规则(注意:自定义校验函数'verify'仍然会执行)

重要参数说明

注意:规则中不能有大写字母,用中划线分隔,同vue props属性设置规则

errMsg

用于自定义校验不通过提示

<pop>
 <input v-verify length="10" err-msg="请输入正确的卡号">
</pop>

maxNumber

注意小于和小于等于的写法

<!--该输入框内容必须为小于等于10的数字-->
<pop>
 <input v-verify max-number="10">
</pop>
<!--该输入框内容必须为小于10的数字,通过'!'来标识-->
<pop>
 <input v-verify max-number="!10">
</pop>

minNumber

参考maxNumber配置

pop

用于设置气泡组件的位置。
默认情况下,插件会查找待校验元素的分发对象或父容器(父容器的父容器的父容器...)是否为pop组件,如果找到则使用之。
当待校验元素和气泡提示不再满足父子容器关系时,可以用如下方式去指定:

<!--当校验不通过时,气泡提示会出现在这个div上面-->
<pop id="cardIdPop">
  <div>我是一个div</div>
</pop>
<input v-verify length="10" err-msg="卡号不正确" pop="cardIdPop">

noCache

用于禁止插件对校验结果的缓存。默认情况下,插件会缓存上次的校验结果,直到待校验元素的值发生变化

<pop>
 <input v-verify length="10" err-msg="卡号不正确" no-cache>
</pop>

canBeNull

插件默认校验输入内容不为空,该参数一般用于如下情况,比如邀请码这种一般可以为空,不为空又需要校验的输入项

自定义校验方法verify始终会执行,主要考虑到该校验方法中的校验对象很可能不仅仅是输入框本身的值,故不应受该配置项的影响

<!--当邀请码不为空时才校验长度是否等于10-->
<pop>
 <input v-verify length="10" err-msg="邀请码不正确" can-be-null>
</pop>

watch

监听其他变量,触发自身校验。
一个常见例子:最少参与人数不能大于最多参与人数,当最少参与人数变化时应当触发最多参与人数的校验

<template>
 <pop>
  <input placeholder="最少参与人数" v-verify v-model="minNumber" v-verify int>
 </pop>
 <pop>
  <input placeholder="最多参与人数" v-verify v-model="minNumber" v-verify int :verify="verifyMaxNumber" :watch="minNumber">
 </pop>
</template>
<script>
export default{
 data () {
  return {
   minNumber: ''
  }
 },
 methods: {
  verifyMaxNumber (val) {
   if (val - this.minNumber < 0) return '最多参与人数不能小于最少参与人数'
  }
 }
}
</script>

规则简写

number/int/phone等无须设定值的规则可以直接:

<pop>
 <!--该输入框内容必须为手机号-->
 <input v-verify phone>
</pop>

maxNumber/minNumber/decimalLength无须写number规则

<pop>
 <!--该输入框内容必须为不大于10的数字-->
 <input v-verify max-number="10">
 <!--不用这么写-->
 <input v-verify number max-number="10">
</pop>

自定义校验方法

如果自带的校验方法满足不了您的需求,可以在校验规则中插入您自己的校验方法

<template>
 <pop>
  <!--通过给props.verify赋值来植入自定义校验-->
  <!--当length规则通过时才会执行自定义校验-->
  <input v-verify length="10" :verify="verifyCardId" err-msg="卡号不正确">
 </pop>
</template>
<script>
export default{
 methods: {
  verifyCardId (val) {
   // val: 待校验的值
   // 可以直接return校验不通过的提示
   // if (val.substr(0,1) !== '0') return '卡号不正确'
   // 如果直接return true/false 校验不通过提示将使用errMsg或默认错误提示
   // return val.substr(0,1) === '0'
  }
 }
}
</script>

自定义校验规则

和自定义校验方法的区别是这个适用于全局,等于增加插件自带的校验规则

// 新增校验是否为6位数字 val: 待校验的值 rule: 规则值。
// 校验是否为6位数字这种一般时不需要额外参数用来对比,所以rule参数用不到。校验文本长度,数字大小这种才会用到rule
// <input v-verify length="6"> '6'会作为rule参数
var verifyBase = verify.verifyBase
verify.addRule('number6', (val, rule) => {
 // 判断是否为6位数字
 // 只需要关注错误的情况 返回默认出错提示即可
 if (!verifyBase('number')(val).valid || !verifyBase('length')(val, 6)) return '请输入正确的6位数字'
})

调用

<!--校验不通过提示优先errMsg,然后才是您自定义规则中返回的默认出错提示-->
<input v-verify number6 err-msg="请输入正确的6位数字验证码">

手动触发校验&分组校验

<template>
 <pop>
  <!--给目标元素设置v-el-->
  <input v-verify length="10" err-msg="卡号1不正确" v-el:ipt>
 </pop>
 <pop>
  <!--给目标元素设置id-->
  <input v-verify length="10" err-msg="卡号2不正确" id="ipt">
 </pop>
 <!--给目标元素设置组名-->
 <verify name="verifyGroup">
  <pop>
   <input v-verify length="10" err-msg="卡号3不正确">
  </pop>
  <pop>
   <input v-verify length="10" err-msg="卡号4不正确">
  </pop>
 </verify>
</template>
<script>
export default{
 ready () {
  // 调用vm对象中$verify方法
  // 无参调用会触发当前vm中所有的待校验元素执行校验并显示校验气泡
  this.$verify()
  // 通过传id参数('#'+id)触发输入框的校验并显示校验气泡
  this.$verify('#ipt')
  // 通过传dom元素触发输入框的校验并显示校验气泡
  this.$verify(this.$els.ipt)
  // 通过传校验组名来校验该组的所有待校验元素
  this.$verify('verifyGroup')
  // 只校验,不显示校验气泡
  this.$verify('verifyGroup', false)
  // 返回:
  {
   // 所有校验结果是否都通过
   valid: true/false,
   results: [
    {
     // 校验的dom元素
     el: DOM,
     // 该元素校验是否通过
     valid: true/false,
     // 错误信息
     msg: ''
    }
   ]
  }
 }
}
</script>

插件的默认校验不通过提示模版

{
 number: {
  common: '请输入数字',
  // >
  maxNumber: '该输入框数字不能大于{maxNumber}',
  // >=
  maxNumber2: '该输入框数字应小于{maxNumber}',
  // <
  minNumber: '该输入框数字不能小于{minNumber}',
  // <=
  minNumber2: '该输入框数字应大于{minNumber}',
  decimalLength: '该输入框最多接受{decimalLength}位小数'
 },
 // 特殊类型
 int: '该输入框仅接受整数',
 phone: '请输入正确的手机号',
 idCard: '请输入正确的身份证号',
 bankCard: '请输入正确的银行卡号',
 email: '请输入正确的邮箱',
 verifyCode: '请输入正确的验证码',
 common: {
  empty: '请补充该项内容',
  length: '请输入{length}位字符',
  minLength: '该输入框内容至少{minLength}位'
 },
 specialInput: {
  checkbox: '请勾选我'
 }
}

您可以按照上述格式自定义您的错误提示

verify.errMsg = {}

也可以只修改某些项

verify.errMsg.int = '{mark}必须为整数'

彩蛋

校验插件不仅能检测到输入内容的变化,绑定值的变化同样在掌控之内,也就是说校验气泡的出现和消失您完全无须手动控制

<!--当卡号输入框出校验气泡提示时,cardId值的变化或重新输入卡号,气泡提示都会消失-->
<pop>
 <input v-model="cardId" v-verify length="10" err-msg="卡号不正确">
</pop>

verifyBase

本插件校验的核心方法来自verify-base

// 通过该方式获取verifyBase以使用其内置的各种校验方法
verify.verifyBase

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
表单(FORM)的一些实用效果代码
Mar 25 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
文本框中禁止非数字字符输入比如手机号码、邮编
Aug 19 Javascript
jquery插件tooltipv顶部淡入淡出效果使用示例
Dec 05 Javascript
使用jquery动态加载Js文件和Css文件
Oct 24 Javascript
分享一些常用的jQuery动画事件和动画函数
Nov 27 Javascript
纯JavaScript代码实现文本比较工具
Feb 17 Javascript
js利用clipboardData实现截屏粘贴功能
Oct 12 Javascript
JavaScript 身份证号有效验证详解及实例代码
Oct 20 Javascript
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 Javascript
Javascript模块化机制实现原理详解
Apr 02 Javascript
vue-element-admin项目导入和导出的实现
May 21 Vue.js
JS仿Base.js实现的继承示例
Apr 07 #Javascript
vue-hook-form使用详解
Apr 07 #Javascript
ES6实现的遍历目录函数示例
Apr 07 #Javascript
如何使用vuejs实现更好的Form validation?
Apr 07 #Javascript
JS实现css hover操作的方法示例
Apr 07 #Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 #Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 #Javascript
You might like
PHP循环获取GET和POST值的代码
2008/04/09 PHP
用PHP将数据导入到Foxmail的实现代码
2010/09/05 PHP
PHP乱码问题,UTF-8乱码常见问题小结
2012/04/09 PHP
php笔记之:有规律大文件的读取与写入的分析
2013/04/26 PHP
php的curl封装类用法实例
2014/11/07 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
javascript中的prototype属性实例分析说明
2010/08/09 Javascript
JavaScript中获取高度和宽度函数总结
2014/10/08 Javascript
javascript实现根据汉字获取简拼
2016/09/25 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
ajax的分页查询示例(不刷新页面)
2017/01/11 Javascript
使用JavaScript根据图片获取条形码的方法
2017/07/04 Javascript
IntelliJ IDEA 安装vue开发插件的方法
2017/11/21 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
JS校验与最终登陆界面功能完整示例
2020/01/13 Javascript
JS实现横向轮播图(初级版)
2020/06/24 Javascript
TypeScript的安装、使用、自动编译的实现
2020/04/10 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
2020/08/03 Javascript
Python中的装饰器用法详解
2015/01/14 Python
python根据出生年份简单计算生肖的方法
2015/03/27 Python
Python中装饰器兼容加括号和不加括号的写法详解
2017/07/05 Python
Python lambda表达式filter、map、reduce函数用法解析
2019/09/11 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
python 获取剪切板内容的两种方法
2020/11/28 Python
Linux的主要特性
2014/10/06 面试题
银行财务部实习生的自我鉴定
2013/11/27 职场文书
教学器材管理制度
2014/01/26 职场文书
现场施工员岗位职责
2014/03/10 职场文书
医院科室评语
2015/01/04 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
2016清明节森林防火广播稿
2015/12/17 职场文书
2019年手机市场的调研报告2篇
2019/10/10 职场文书
深度学习小工程练习之垃圾分类详解
2021/04/14 Python
Python matplotlib可视化之绘制韦恩图
2022/02/24 Python
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL