自带气泡提示的 vue 校验插件。 项目地址
安装
1
| npm install vue-verify-pop
|
使用
VUE 版本:1.x
必须在 vue-cli 生成的 webpack 模板环境中使用
一、在./main.js 中执行全局配置
1 2 3 4 5 6 7 8 9 10
| import vue from 'vue' import verify from 'vue-verify-pop' vue.use(verify)
verify.errMsg = YourErroMsg
verify.addRule('myRule', (v) => { return '校验不通过' })
|
二、在表单元素中配置校验规则
1 2 3 4 5
| <pop> <input v-verify decimal-length="2" /> </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
用于自定义校验不通过提示
1 2 3
| <pop> <input v-verify length="10" err-msg="请输入正确的卡号" /> </pop>
|
maxNumber
注意小于和小于等于的写法
1 2 3 4 5 6 7 8
| <pop> <input v-verify max-number="10" /> </pop>
<pop> <input v-verify max-number="!10" /> </pop>
|
minNumber
参考maxNumber配置
pop
用于设置气泡组件的位置。
默认情况下,插件会查找待校验元素的分发对象或父容器(父容器的父容器的父容器…)是否为 pop 组件,如果找到则使用之。
当待校验元素和气泡提示不再满足父子容器关系时,可以用如下方式去指定:
1 2 3 4 5
| <pop id="cardIdPop"> <div>我是一个div</div> </pop> <input v-verify length="10" err-msg="卡号不正确" pop="cardIdPop" />
|
noCache
用于禁止插件对校验结果的缓存。默认情况下,插件会缓存上次的校验结果,直到待校验元素的值发生变化
1 2 3
| <pop> <input v-verify length="10" err-msg="卡号不正确" no-cache /> </pop>
|
canBeNull
插件默认校验输入内容不为空,该参数一般用于如下情况,比如邀请码这种一般可以为空,不为空又需要校验的输入项
自定义校验方法verify始终会执行,主要考虑到该校验方法中的校验对象很可能不仅仅是输入框本身的值,故不应受该配置项的影响
1 2 3 4
| <pop> <input v-verify length="10" err-msg="邀请码不正确" can-be-null /> </pop>
|
watch
监听其他变量,触发自身校验。
一个常见例子:最少参与人数不能大于最多参与人数,当最少参与人数变化时应当触发最多参与人数的校验
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36
| <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 等无须设定值的规则可以直接:
1 2 3 4
| <pop> <input v-verify phone /> </pop>
|
maxNumber/minNumber/decimalLength 无须写 number 规则
1 2 3 4 5 6
| <pop> <input v-verify max-number="10" /> <input v-verify number max-number="10" /> </pop>
|
自定义校验方法
如果自带的校验方法满足不了你的需求,可以在校验规则中插入你自己的校验方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| <template> <pop> <input v-verify length="10" :verify="verifyCardId" err-msg="卡号不正确" /> </pop> </template> <script> export default { methods: { verifyCardId(val) { }, }, } </script>
|
自定义校验规则
和自定义校验方法的区别是这个适用于全局,等于增加插件自带的校验规则
1 2 3 4 5 6 7
| // 新增校验是否为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位数字' })
|
调用
1 2
| <input v-verify number6 err-msg="请输入正确的6位数字验证码" />
|
手动触发校验&分组校验
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51
| <template> <pop> <input v-verify length="10" err-msg="卡号1不正确" v-el:ipt /> </pop> <pop> <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() { this.$verify() this.$verify('#ipt') this.$verify(this.$els.ipt) this.$verify('verifyGroup') this.$verify('verifyGroup', false) /* 返回: { valid: true/false, results: [ { el: DOM, valid: true/false, msg: '' } ] } */ }, } </script>
|
插件的默认校验不通过提示模版
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
| { 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: '请勾选我' } }
|
你可以按照上述格式自定义你的错误提示
也可以只修改某些项
1
| verify.errMsg.int = '{mark}必须为整数'
|
彩蛋
校验插件不仅能检测到输入内容的变化,绑定值的变化同样在掌控之内,也就是说校验气泡的出现和消失你完全无须手动控制
1 2 3 4
| <pop> <input v-model="cardId" v-verify length="10" err-msg="卡号不正确" /> </pop>
|
pop
本插件的气泡提示来自 vue-pop,有关气泡提示的设置请参考该文档
verifyBase
本插件校验的核心方法来自 verify-base
1 2
| // 通过该方式获取verifyBase以使用其内置的各种校验方法 verify.verifyBase
|