本教程大家分享了自帶氣泡提示的vue校驗插件，供大家參考，具體內容如下
安裝
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 '校驗不通過'})二、在表單元素中配置校驗規則
<!--待校驗元素的pop容器--><pop> <!--該輸入框內容為最多為兩位小數的數字--> <input v-verify decimal-length="2"></pop>
ok，您已經完成了一個基礎校驗。氣泡提示怎么樣？丑的話自己用css改吧。。
當輸入框失去焦點時會自動觸發校驗，如果校驗不通過會出現氣泡。再次輸入氣泡會消失
支持的校驗規則(繼承verify-base.js)
重要參數說明
注意：規則中不能有大寫字母，用中劃線分隔，同vue props屬性設置規則
errMsg
用于自定義校驗不通過提示
<pop> <input v-verify length="10" err-msg="請輸入正確的卡號"></pop>
maxNumber
注意小于和小于等于的寫法
<!--該輸入框內容必須為小于等于10的數字--><pop> <input v-verify max-number="10"></pop><!--該輸入框內容必須為小于10的數字,通過'!'來標識--><pop> <input v-verify max-number="!10"></pop>
minNumber
參考maxNumber配置
pop
用于設置氣泡組件的位置。
默認情況下，插件會查找待校驗元素的分發對象或父容器(父容器的父容器的父容器...)是否為pop組件，如果找到則使用之。
當待校驗元素和氣泡提示不再滿足父子容器關系時，可以用如下方式去指定：
<!--當校驗不通過時，氣泡提示會出現在這個div上面--><pop id="cardIdPop"> <div>我是一個div</div></pop><input v-verify length="10" err-msg="卡號不正確" pop="cardIdPop">
noCache
用于禁止插件對校驗結果的緩存。默認情況下，插件會緩存上次的校驗結果，直到待校驗元素的值發生變化
<pop> <input v-verify length="10" err-msg="卡號不正確" no-cache></pop>
canBeNull
插件默認校驗輸入內容不為空，該參數一般用于如下情況，比如邀請碼這種一般可以為空，不為空又需要校驗的輸入項
自定義校驗方法verify始終會執行，主要考慮到該校驗方法中的校驗對象很可能不僅僅是輸入框本身的值，故不應受該配置項的影響
<!--當邀請碼不為空時才校驗長度是否等于10--><pop> <input v-verify length="10" err-msg="邀請碼不正確" can-be-null></pop>
watch
監聽其他變量，觸發自身校驗。
一個常見例子:最少參與人數不能大于最多參與人數，當最少參與人數變化時應當觸發最多參與人數的校驗
<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>規則簡寫
number/int/phone等無須設定值的規則可以直接：
<pop> <!--該輸入框內容必須為手機號--> <input v-verify phone></pop>
maxNumber/minNumber/decimalLength無須寫number規則
<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: '請勾選我' }}您可以按照上述格式自定義您的錯誤提示
verify.errMsg = {}
也可以只修改某些項
verify.errMsg.int = '{mark}必須為整數'
彩蛋
校驗插件不僅能檢測到輸入內容的變化，綁定值的變化同樣在掌控之內，也就是說校驗氣泡的出現和消失您完全無須手動控制
<!--當卡號輸入框出校驗氣泡提示時，cardId值的變化或重新輸入卡號，氣泡提示都會消失--><pop> <input v-model="cardId" v-verify length="10" err-msg="卡號不正確"></pop>
verifyBase
本插件校驗的核心方法來自verify-base
// 通過該方式獲取verifyBase以使用其內置的各種校驗方法verify.verifyBase
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
