<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不正确"> </pop> <!--给目标元素设置组名--> <verify> <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