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

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

目前成都创新互联已为1000多家的企业提供了网站建设、域名、网站空间、网站改版维护、企业网站设计、彭山网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

安装

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 '校验不通过'})

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

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

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

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

重要参数说明

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

errMsg

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

maxNumber

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

minNumber

参考maxNumber配置

pop

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

  
我是一个div

noCache

用于禁止插件对校验结果的缓存。默认情况下，插件会缓存上次的校验结果，直到待校验元素的值发生变化

canBeNull

插件默认校验输入内容不为空，该参数一般用于如下情况，比如邀请码这种一般可以为空，不为空又需要校验的输入项

自定义校验方法verify始终会执行，主要考虑到该校验方法中的校验对象很可能不仅仅是输入框本身的值，故不应受该配置项的影响

watch

监听其他变量，触发自身校验。
一个常见例子:最少参与人数不能大于最多参与人数，当最少参与人数变化时应当触发最多参与人数的校验

规则简写

number/int/phone等无须设定值的规则可以直接：

maxNumber/minNumber/decimalLength无须写number规则

自定义校验方法

如果自带的校验方法满足不了您的需求，可以在校验规则中插入您自己的校验方法

自定义校验规则

和自定义校验方法的区别是这个适用于全局，等于增加插件自带的校验规则

// 新增校验是否为6位数字 val: 待校验的值 rule: 规则值。
// 校验是否为6位数字这种一般时不需要额外参数用来对比,所以rule参数用不到。校验文本长度，数字大小这种才会用到rule
//  '6'会作为rule参数
var verifyBase = verify.verifyBase
verify.addRule('number6', (val, rule) => {
 // 判断是否为6位数字
 // 只需要关注错误的情况 返回默认出错提示即可
 if (!verifyBase('number')(val).valid || !verifyBase('length')(val, 6)) return '请输入正确的6位数字'
})

调用

手动触发校验&分组校验

插件的默认校验不通过提示模版

{
 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}必须为整数'

彩蛋

校验插件不仅能检测到输入内容的变化，绑定值的变化同样在掌控之内，也就是说校验气泡的出现和消失您完全无须手动控制

verifyBase

本插件校验的核心方法来自verify-base

// 通过该方式获取verifyBase以使用其内置的各种校验方法
verify.verifyBase

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。