自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）

import vue from 'vue'
import verify from 'vue-verify-pop'
vue.use(verify)
// 以下配置非必須，按你的需求來(lái)
// 配置默認(rèn)校驗(yàn)不通過(guò)時(shí)的提示信息
verify.errMsg = YourErroMsg
// 增加校驗(yàn)規(guī)則
verify.addRule('myRule', (v) => {return '校驗(yàn)不通過(guò)'})

<!--待校驗(yàn)元素的pop容器-->
<pop>
 <!--該輸入框內(nèi)容為最多為兩位小數(shù)的數(shù)字-->
 <input v-verify decimal-length="2">
</pop>

<pop>
 <input v-verify length="10" err-msg="請(qǐng)輸入正確的卡號(hào)">
</pop>

<!--該輸入框內(nèi)容必須為小于等于10的數(shù)字-->
<pop>
 <input v-verify max-number="10">
</pop>
<!--該輸入框內(nèi)容必須為小于10的數(shù)字,通過(guò)'!'來(lái)標(biāo)識(shí)-->
<pop>
 <input v-verify max-number="!10">
</pop>

<!--當(dāng)校驗(yàn)不通過(guò)時(shí)，氣泡提示會(huì)出現(xiàn)在這個(gè)div上面-->
<pop id="cardIdPop">
  <div>我是一個(gè)div</div>
</pop>
<input v-verify length="10" err-msg="卡號(hào)不正確" pop="cardIdPop">

<pop>
 <input v-verify length="10" err-msg="卡號(hào)不正確" no-cache>
</pop>

<!--當(dāng)邀請(qǐng)碼不為空時(shí)才校驗(yàn)長(zhǎng)度是否等于10-->
<pop>
 <input v-verify length="10" err-msg="邀請(qǐng)碼不正確" can-be-null>
</pop>

<template>
 <pop>
  <input placeholder="最少參與人數(shù)" v-verify v-model="minNumber" v-verify int>
 </pop>
 <pop>
  <input placeholder="最多參與人數(shù)" 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 '最多參與人數(shù)不能小于最少參與人數(shù)'
  }
 }
}
</script>

<pop>
 <!--該輸入框內(nèi)容必須為手機(jī)號(hào)-->
 <input v-verify phone>
</pop>

<pop>
 <!--該輸入框內(nèi)容必須為不大于10的數(shù)字-->
 <input v-verify max-number="10">
 <!--不用這么寫-->
 <input v-verify number max-number="10">
</pop>

<template>
 <pop>
  <!--通過(guò)給props.verify賦值來(lái)植入自定義校驗(yàn)-->
  <!--當(dāng)length規(guī)則通過(guò)時(shí)才會(huì)執(zhí)行自定義校驗(yàn)-->
  <input v-verify length="10" :verify="verifyCardId" err-msg="卡號(hào)不正確">
 </pop>
</template>
<script>
export default{
 methods: {
  verifyCardId (val) {
   // val: 待校驗(yàn)的值
   // 可以直接return校驗(yàn)不通過(guò)的提示
   // if (val.substr(0,1) !== '0') return '卡號(hào)不正確'
   // 如果直接return true/false 校驗(yàn)不通過(guò)提示將使用errMsg或默認(rèn)錯(cuò)誤提示
   // return val.substr(0,1) === '0'
  }
 }
}
</script>

// 新增校驗(yàn)是否為6位數(shù)字 val: 待校驗(yàn)的值 rule: 規(guī)則值。
// 校驗(yàn)是否為6位數(shù)字這種一般時(shí)不需要額外參數(shù)用來(lái)對(duì)比,所以rule參數(shù)用不到。校驗(yàn)文本長(zhǎng)度，數(shù)字大小這種才會(huì)用到rule
// <input v-verify length="6"> '6'會(huì)作為rule參數(shù)
var verifyBase = verify.verifyBase
verify.addRule('number6', (val, rule) => {
 // 判斷是否為6位數(shù)字
 // 只需要關(guān)注錯(cuò)誤的情況 返回默認(rèn)出錯(cuò)提示即可
 if (!verifyBase('number')(val).valid || !verifyBase('length')(val, 6)) return '請(qǐng)輸入正確的6位數(shù)字'
})

<!--校驗(yàn)不通過(guò)提示優(yōu)先errMsg,然后才是您自定義規(guī)則中返回的默認(rèn)出錯(cuò)提示-->
<input v-verify number6 err-msg="請(qǐng)輸入正確的6位數(shù)字驗(yàn)證碼">

<template>
 <pop>
  <!--給目標(biāo)元素設(shè)置v-el-->
  <input v-verify length="10" err-msg="卡號(hào)1不正確" v-el:ipt>
 </pop>
 <pop>
  <!--給目標(biāo)元素設(shè)置id-->
  <input v-verify length="10" err-msg="卡號(hào)2不正確" id="ipt">
 </pop>
 <!--給目標(biāo)元素設(shè)置組名-->
 <verify name="verifyGroup">
  <pop>
   <input v-verify length="10" err-msg="卡號(hào)3不正確">
  </pop>
  <pop>
   <input v-verify length="10" err-msg="卡號(hào)4不正確">
  </pop>
 </verify>
</template>
<script>
export default{
 ready () {
  // 調(diào)用vm對(duì)象中$verify方法
  // 無(wú)參調(diào)用會(huì)觸發(fā)當(dāng)前vm中所有的待校驗(yàn)元素執(zhí)行校驗(yàn)并顯示校驗(yàn)氣泡
  this.$verify()
  // 通過(guò)傳id參數(shù)('#'+id)觸發(fā)輸入框的校驗(yàn)并顯示校驗(yàn)氣泡
  this.$verify('#ipt')
  // 通過(guò)傳dom元素觸發(fā)輸入框的校驗(yàn)并顯示校驗(yàn)氣泡
  this.$verify(this.$els.ipt)
  // 通過(guò)傳校驗(yàn)組名來(lái)校驗(yàn)該組的所有待校驗(yàn)元素
  this.$verify('verifyGroup')
  // 只校驗(yàn)，不顯示校驗(yàn)氣泡
  this.$verify('verifyGroup', false)
  // 返回：
  {
   // 所有校驗(yàn)結(jié)果是否都通過(guò)
   valid: true/false,
   results: [
    {
     // 校驗(yàn)的dom元素
     el: DOM,
     // 該元素校驗(yàn)是否通過(guò)
     valid: true/false,
     // 錯(cuò)誤信息
     msg: ''
    }
   ]
  }
 }
}
</script>

{
 number: {
  common: '請(qǐng)輸入數(shù)字',
  // >
  maxNumber: '該輸入框數(shù)字不能大于{maxNumber}',
  // >=
  maxNumber2: '該輸入框數(shù)字應(yīng)小于{maxNumber}',
  // <
  minNumber: '該輸入框數(shù)字不能小于{minNumber}',
  // <=
  minNumber2: '該輸入框數(shù)字應(yīng)大于{minNumber}',
  decimalLength: '該輸入框最多接受{decimalLength}位小數(shù)'
 },
 // 特殊類型
 int: '該輸入框僅接受整數(shù)',
 phone: '請(qǐng)輸入正確的手機(jī)號(hào)',
 idCard: '請(qǐng)輸入正確的身份證號(hào)',
 bankCard: '請(qǐng)輸入正確的銀行卡號(hào)',
 email: '請(qǐng)輸入正確的郵箱',
 verifyCode: '請(qǐng)輸入正確的驗(yàn)證碼',
 common: {
  empty: '請(qǐng)補(bǔ)充該項(xiàng)內(nèi)容',
  length: '請(qǐng)輸入{length}位字符',
  minLength: '該輸入框內(nèi)容至少{minLength}位'
 },
 specialInput: {
  checkbox: '請(qǐng)勾選我'
 }
}

<!--當(dāng)卡號(hào)輸入框出校驗(yàn)氣泡提示時(shí)，cardId值的變化或重新輸入卡號(hào)，氣泡提示都會(huì)消失-->
<pop>
 <input v-model="cardId" v-verify length="10" err-msg="卡號(hào)不正確">
</pop>

// 通過(guò)該方式獲取verifyBase以使用其內(nèi)置的各種校驗(yàn)方法
verify.verifyBase