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

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

<pop>
 <input v-verify length="10" err-msg="請輸入正確的卡號">
</pop>

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

<!--當(dāng)校驗不通過時，氣泡提示會出現(xiàn)在這個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>

<!--當(dāng)邀請碼不為空時才校驗長度是否等于10-->
<pop>
 <input v-verify length="10" err-msg="邀請碼不正確" 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)容必須為手機號-->
 <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>
  <!--通過給props.verify賦值來植入自定義校驗-->
  <!--當(dāng)length規(guī)則通過時才會執(zhí)行自定義校驗-->
  <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位數(shù)字 val: 待校驗的值 rule: 規(guī)則值。
// 校驗是否為6位數(shù)字這種一般時不需要額外參數(shù)用來對比,所以rule參數(shù)用不到。校驗文本長度，數(shù)字大小這種才會用到rule
// <input v-verify length="6"> '6'會作為rule參數(shù)
var verifyBase = verify.verifyBase
verify.addRule('number6', (val, rule) => {
 // 判斷是否為6位數(shù)字
 // 只需要關(guān)注錯誤的情況 返回默認出錯提示即可
 if (!verifyBase('number')(val).valid || !verifyBase('length')(val, 6)) return '請輸入正確的6位數(shù)字'
})

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

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

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

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

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