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

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

安装

使用

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

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

{return '校验不通过'})

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

rush:js;">

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

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

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

重要参数说明

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

errMsg

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

rush:js;">

maxnumber

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

rush:js;">

minNumber

参考maxnumber配置

pop

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

rush:js;"> 我是一个div