自帶氣泡提示的vue校驗(yàn)插件（vue-verify-pop）
本教程大家分享了自帶氣泡提示的vue校驗(yàn)插件，供大家參考，具體內(nèi)容如下
安裝
npm install vue-verify-pop
使用
VUE版本：1.x
必須在vue-cli生成的webpack模板環(huán)境中使用
一、在./main.js中執(zhí)行全局配置
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)規(guī)則
<!--待校驗(yàn)元素的pop容器--> <pop> <!--該輸入框內(nèi)容為最多為兩位小數(shù)的數(shù)字--> <input v-verify decimal-length="2"> </pop>
ok，您已經(jīng)完成了一個(gè)基礎(chǔ)校驗(yàn)。氣泡提示怎么樣？丑的話自己用css改吧。。
當(dāng)輸入框失去焦點(diǎn)時(shí)會(huì)自動(dòng)觸發(fā)校驗(yàn)，如果校驗(yàn)不通過(guò)會(huì)出現(xiàn)氣泡。再次輸入氣泡會(huì)消失
支持的校驗(yàn)規(guī)則(繼承verify-base.js)
- length: 校驗(yàn)文本長(zhǎng)度
- minLength: 校驗(yàn)文本最短長(zhǎng)度
- maxLength: 校驗(yàn)文本最長(zhǎng)長(zhǎng)度
- maxNumber: 校驗(yàn)數(shù)字最大值
- minNumber: 校驗(yàn)數(shù)字最小值
- decimalLength: 校驗(yàn)小數(shù)位
- number: 校驗(yàn)是否為數(shù)字
- int: 校驗(yàn)是否為整數(shù)
- phone: 校驗(yàn)是否為手機(jī)號(hào)
- idCard: 校驗(yàn)是否為身份證號(hào)
- bankCard: 校驗(yàn)是否為銀行卡號(hào)
- email: 校驗(yàn)是否為電子郵件地址
- verifyCode: 校驗(yàn)是否為6位數(shù)字驗(yàn)證碼
- canBeNull: 當(dāng)參數(shù)為空時(shí)跳過(guò)校驗(yàn)，不會(huì)執(zhí)行后面的校驗(yàn)規(guī)則(注意：自定義校驗(yàn)函數(shù)'verify'仍然會(huì)執(zhí)行)
重要參數(shù)說(shuō)明
注意：規(guī)則中不能有大寫字母，用中劃線分隔，同vue props屬性設(shè)置規(guī)則
errMsg
用于自定義校驗(yàn)不通過(guò)提示
<pop> <input v-verify length="10" err-msg="請(qǐng)輸入正確的卡號(hào)"> </pop>
maxNumber
注意小于和小于等于的寫法
<!--該輸入框內(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>
minNumber
參考maxNumber配置
pop
用于設(shè)置氣泡組件的位置。
默認(rèn)情況下，插件會(huì)查找待校驗(yàn)元素的分發(fā)對(duì)象或父容器(父容器的父容器的父容器...)是否為pop組件，如果找到則使用之。
當(dāng)待校驗(yàn)元素和氣泡提示不再滿足父子容器關(guān)系時(shí)，可以用如下方式去指定：
<!--當(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">
noCache
用于禁止插件對(duì)校驗(yàn)結(jié)果的緩存。默認(rèn)情況下，插件會(huì)緩存上次的校驗(yàn)結(jié)果，直到待校驗(yàn)元素的值發(fā)生變化
<pop> <input v-verify length="10" err-msg="卡號(hào)不正確" no-cache> </pop>
canBeNull
插件默認(rèn)校驗(yàn)輸入內(nèi)容不為空，該參數(shù)一般用于如下情況，比如邀請(qǐng)碼這種一般可以為空，不為空又需要校驗(yàn)的輸入項(xiàng)
自定義校驗(yàn)方法verify始終會(huì)執(zhí)行，主要考慮到該校驗(yàn)方法中的校驗(yàn)對(duì)象很可能不僅僅是輸入框本身的值，故不應(yīng)受該配置項(xiàng)的影響
<!--當(dāng)邀請(qǐng)碼不為空時(shí)才校驗(yàn)長(zhǎng)度是否等于10--> <pop> <input v-verify length="10" err-msg="邀請(qǐng)碼不正確" can-be-null> </pop>
watch
監(jiān)聽(tīng)其他變量，觸發(fā)自身校驗(yàn)。
一個(gè)常見(jiàn)例子:最少參與人數(shù)不能大于最多參與人數(shù)，當(dāng)最少參與人數(shù)變化時(shí)應(yīng)當(dāng)觸發(fā)最多參與人數(shù)的校驗(yàn)
<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>
規(guī)則簡(jiǎn)寫
number/int/phone等無(wú)須設(shè)定值的規(guī)則可以直接：
<pop> <!--該輸入框內(nèi)容必須為手機(jī)號(hào)--> <input v-verify phone> </pop>
maxNumber/minNumber/decimalLength無(wú)須寫number規(guī)則
<pop> <!--該輸入框內(nèi)容必須為不大于10的數(shù)字--> <input v-verify max-number="10"> <!--不用這么寫--> <input v-verify number max-number="10"> </pop>
自定義校驗(yàn)方法
如果自帶的校驗(yàn)方法滿足不了您的需求，可以在校驗(yàn)規(guī)則中插入您自己的校驗(yàn)方法
<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)規(guī)則
和自定義校驗(yàn)方法的區(qū)別是這個(gè)適用于全局，等于增加插件自帶的校驗(yàn)規(guī)則
// 新增校驗(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ù)字'
})
調(diào)用
<!--校驗(yàn)不通過(guò)提示優(yōu)先errMsg,然后才是您自定義規(guī)則中返回的默認(rèn)出錯(cuò)提示--> <input v-verify number6 err-msg="請(qǐng)輸入正確的6位數(shù)字驗(yàn)證碼">
手動(dòng)觸發(fā)校驗(yàn)&分組校驗(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>
插件的默認(rèn)校驗(yàn)不通過(guò)提示模版
{
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)勾選我'
}
}
您可以按照上述格式自定義您的錯(cuò)誤提示
verify.errMsg = {}
也可以只修改某些項(xiàng)
verify.errMsg.int = '{mark}必須為整數(shù)'
彩蛋
校驗(yàn)插件不僅能檢測(cè)到輸入內(nèi)容的變化，綁定值的變化同樣在掌控之內(nèi)，也就是說(shuō)校驗(yàn)氣泡的出現(xiàn)和消失您完全無(wú)須手動(dò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>
verifyBase
本插件校驗(yàn)的核心方法來(lái)自verify-base
// 通過(guò)該方式獲取verifyBase以使用其內(nèi)置的各種校驗(yàn)方法 verify.verifyBase
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Element中el-table動(dòng)態(tài)合并單元格(span-method方法)
本文主要介紹了Element中el-table動(dòng)態(tài)合并單元格(span-method方法)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-05-05
vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題詳解
大家應(yīng)該都知道父組件可以向子組件通過(guò)屬性形式傳遞參數(shù),傳遞的參數(shù)也可以隨時(shí)隨意修改;但子組件不能修改父組件傳遞過(guò)來(lái)的參數(shù),所以下面這篇文章主要給大家介紹了關(guān)于vue父子組件傳值以及單向數(shù)據(jù)流問(wèn)題的相關(guān)資料,需要的朋友可以參考下2021-09-09
這篇文章主要介紹了vue各種字符串拼接方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-03-03
elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過(guò)程)
自定義上傳思路很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于elementUI自定義上傳文件功能實(shí)現(xiàn)(前端后端超詳細(xì)過(guò)程)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11
這些年寫前端vue時(shí)經(jīng)常碰到虛擬DOM這個(gè)單詞，但都是聽(tīng)到就算了，左耳進(jìn)右耳出，知道有這么個(gè)東西就完了，因?yàn)楦杏X(jué)也沒(méi)有影響我實(shí)現(xiàn)公司的產(chǎn)品業(yè)務(wù)邏輯。今天在這里想花點(diǎn)時(shí)間探討下虛擬DOM相關(guān)的知識(shí)，給自己補(bǔ)補(bǔ)課2022-10-10
VUE3+vite項(xiàng)目中動(dòng)態(tài)引入組件與異步組件的詳細(xì)實(shí)例
在做vue3項(xiàng)目中時(shí),每次使用都需要先進(jìn)行引入,下面這篇文章主要給大家介紹了關(guān)于VUE3+vite項(xiàng)目中動(dòng)態(tài)引入組件與異步組件的相關(guān)資料,需要的朋友可以參考下2022-09-09
ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)
這篇文章主要為大家介紹了ElementUI?$notify通知方法中渲染自定義組件實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了Vue之ref屬性，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助，希望能夠給你帶來(lái)幫助2021-11-11
vue是法語(yǔ)中視圖的意思，Vue.js是一個(gè)輕巧、高性能、可組件化的MVVM庫(kù)，同時(shí)擁有非常容易上手的API。這篇文章主要介紹了Vue.js快速入門實(shí)例教程的相關(guān)資料,需要的朋友可以參考下2016-10-10
Element?Plus組件Form表單Table表格二次封裝的完整過(guò)程
一般在后臺(tái)管理系統(tǒng)的開發(fā)中,都會(huì)遇到很多table,但每一次都去引入el-table就會(huì)導(dǎo)致代碼十分冗余,所以基于組件做一下二次封裝成自己需要的組件就十分nice,下面這篇文章主要給大家介紹了關(guān)于Element?Plus組件Form表單Table表格二次封裝的相關(guān)資料,需要的朋友可以參考下2022-09-09