自带气泡提示的vue校验插件（vue-verify-pop）
21 浏览量
2020-12-09
15:34:47
上传
评论
收藏 82KB PDF 举报
自带气泡提示的自带气泡提示的vue校验插件（校验插件（vue-verify-pop））
本教程大家分享了自带气泡提示的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>
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
评论0