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

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>

<pop> <input v-verify length="10" err-msg="请输入正确的卡号"></pop>

<!--该输入框内容必须为小于等于10的数字--><pop> <input v-verify max-number="10"></pop><!--该输入框内容必须为小于10的数字,通过'!'来标识--><pop> <input v-verify max-number="!10"></pop>

<!--当校验不通过时，气泡提示会出现在这个div上面--><pop id="cardIdPop">  <div>我是一个div</div></pop><input v-verify length="10" err-msg="卡号不正确" pop="cardIdPop">

<pop> <input v-verify length="10" err-msg="卡号不正确" no-cache></pop>

<!--当邀请码不为空时才校验长度是否等于10--><pop> <input v-verify length="10" err-msg="邀请码不正确" can-be-null></pop>

<template> <pop>  <input placeholder="最少参与人数" v-verify v-model="minNumber" v-verify int> </pop> <pop>  <input placeholder="最多参与人数" v-verify v-model="minNumber" v-verify int :verify="verifyMaxNumber" :watch="minNumber"> </pop></template><script>export default{ data () {  return {   minNumber: ''  } }, methods: {  verifyMaxNumber (val) {   if (val - this.minNumber < 0) return '最多参与人数不能小于最少参与人数'  } }}</script>

<pop> <!--该输入框内容必须为手机号--> <input v-verify phone></pop>

<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.verifyBaseverify.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不正确" id="ipt"> </pop> <!--给目标元素设置组名--> <verify name="verifyGroup">  <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: '请勾选我' }}

<!--当卡号输入框出校验气泡提示时，cardId值的变化或重新输入卡号，气泡提示都会消失--><pop> <input v-model="cardId" v-verify length="10" err-msg="卡号不正确"></pop>

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