自带气泡提示的vue校验插件（vue-verify-pop）
|
本教程大家分享了自带气泡提示的vue校验插件，供大家参考，具体内容如下 安装
VUE版本：1.x 必须在vue-cli生成的webpack模板环境中使用 一、在./main.js中执行全局配置 {return '校验不通过'})
二、在表单元素中配置校验规则
ok，您已经完成了一个基础校验。气泡提示怎么样？丑的话自己用css改吧。。 当输入框失去焦点时会自动触发校验，如果校验不通过会出现气泡。再次输入气泡会消失 支持的校验规则(继承verify-base.js)
重要参数说明注意：规则中不能有大写字母，用中划线分隔，同vue props属性设置规则 errMsg 用于自定义校验不通过提示 maxNumber 注意小于和小于等于的写法 minNumber 参考maxNumber配置 pop 用于设置气泡组件的位置。 默认情况下，插件会查找待校验元素的分发对象或父容器(父容器的父容器的父容器...)是否为pop组件，如果找到则使用之。 当待校验元素和气泡提示不再满足父子容器关系时，可以用如下方式去指定： noCache 用于禁止插件对校验结果的缓存。默认情况下，插件会缓存上次的校验结果，直到待校验元素的值发生变化 canBeNull
自定义校验方法verify始终会执行，主要考虑到该校验方法中的校验对象很可能不仅仅是输入框本身的值，故不应受该配置项的影响 watch 监听其他变量，触发自身校验。
一个常见例子:最少参与人数不能大于最多参与人数，当最少参与人数变化时应当触发最多参与人数的校验 number/int/phone等无须设定值的规则可以直接： maxNumber/minNumber/decimalLength无须写number规则 自定义校验方法如果自带的校验方法满足不了您的需求，可以在校验规则中插入您自己的校验方法 自定义校验规则和自定义校验方法的区别是这个适用于全局，等于增加插件自带的校验规则 {
// 判断是否为6位数字
// 只需要关注错误的情况 返回默认出错提示即可
if (!verifyBase('number')(val).valid || !verifyBase('length')(val,6)) return '请输入正确的6位数字'
})
调用 手动触发校验&分组校验插件的默认校验不通过提示模版
maxNumber: '该输入框数字不能大于{maxNumber}',// >=
maxNumber2: '该输入框数字应小于{maxNumber}',// <
minNumber: '该输入框数字不能小于{minNumber}',// <=
minNumber2: '该输入框数字应大于{minNumber}',decimalLength: '该输入框最多接受{decimalLength}位小数'
},// 特殊类型
int: '该输入框仅接受整数',phone: '请输入正确的手机号',idCard: '请输入正确的身份证号',bankCard: '请输入正确的银行卡号',email: '请输入正确的邮箱',verifyCode: '请输入正确的验证码',common: {
empty: '请补充该项内容',length: '请输入{length}位字符',minLength: '该输入框内容至少{minLength}位'
},specialInput: {
checkbox: '请勾选我'
}
}
您可以按照上述格式自定义您的错误提示
也可以只修改某些项
校验插件不仅能检测到输入内容的变化，绑定值的变化同样在掌控之内，也就是说校验气泡的出现和消失您完全无须手动控制 本插件校验的核心方法来自 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
