Vee-Validate的使用方法詳解
引入：
npm install vee-validate --save
vue代碼：
import VeeValidate from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN'; //引入中文包，提示信息可以以中文形式顯示
import { Validator } from 'vee-validate';
Validator.addLocale(zh_CN); // 設(shè)置提示信息中文方式顯示
const config = {
errorBagName: 'errors',
fieldsBagName: 'fields',
delay: 100,
locale: 'zh_CN',
strict: true,
enableAutoClasses: true,
events: 'blur',
inject: true
};
// 自定義提示信息
const dictionary = {
zh_CN: {
messages: {
ip: () => 'ip格式不正確😯 >.<'
}
}
};
Validator.updateDictionary(dictionary);
// 自定義規(guī)則
Validator.extend('qq', {
messages: {
zh_CN:field => 'qq號碼輸入不正確'
},
validate: value => {
return /^[1-9][0-9]{4,14}$/.test(value);
}
});
Vue.use(VeeValidate, config); //一般插件都要use一下
使用
<label><span>ip：</span><input v-validate="'required|email'" name="email" type="text" v-model="ip"/></label>
<span v-show="errors.first('ip')">{{ errors.first('ip') }}</span>
注意 ： name一定要寫，否則不會進(jìn)行驗(yàn)證
config配置信息
插件的一些功能可以自定義，需要編寫config，然后Vue.use(VeeValidate, config)來使用
一下為配置信息的意思（可能不全面）
errorBagName： 'erroers'
所有的錯誤信息都是放在這個里面的，如果名稱和頁面上的變量名字沖突，需要修改成其他的，當(dāng)是errors.fist的時候，error就是字符串，當(dāng)使用error.all()/error.collect()的時候就是數(shù)組
fieldsBagName: 'fields'
字段的名稱（標(biāo)志）的對象，將在每個Vue的實(shí)例數(shù)據(jù)注入。如果在頁面上使用了ip的驗(yàn)證，那么，可以通過如下獲取一個對象:
this.fileds.ip
>> 獲取到的對象：
{
dirty :true
invalid:false
pending:false
pristine:false
required:true
touched:true
untouched:false
valid:true
validated:true
}
delay : 100 表示獲取輸入信息的時間
locale： ‘zh_CN' 驗(yàn)證消息的默認(rèn)語言。
strict: true 表示沒有設(shè)置規(guī)則的表單不進(jìn)行驗(yàn)證
classes (不懂)
events: 'blur|input' 默認(rèn)是input|blur 就是在用戶輸入和表單失去焦點(diǎn)的時候都進(jìn)行驗(yàn)證，blue表示失去焦點(diǎn)的時候進(jìn)行驗(yàn)證
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
Pinia?是一個基于?Vue?3?的狀態(tài)管理庫，可以更好地支持?TypeScript?和更靈活的狀態(tài)管理方式，本文主要介紹了pinia的使用與持久化處理，需要的可以參考一下2023-07-07
vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢與更改方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章給大家分享了vue移動端路由切換實(shí)例以及相關(guān)知識點(diǎn)，對此有興趣的朋友可以參考學(xué)習(xí)下。2018-05-05
Vant彈出列表多選輸入框下拉選擇代碼(可直接復(fù)制使用)
vue項(xiàng)目無論是用element中的Select選擇器,還是使用公司維護(hù)的組件,都可以輕松實(shí)現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關(guān)于Vant彈出列表多選輸入框下拉選擇的相關(guān)資料,需要的朋友可以參考下2024-01-01
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進(jìn)行合并,所以下面這篇文章主要給大家介紹了關(guān)于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
elementUi vue el-radio 監(jiān)聽選中變化的實(shí)例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-06-06
vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導(dǎo)入變量字符串路徑)，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
公司業(yè)務(wù)新開了一個商家管理微信H5移動端項(xiàng)目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實(shí)現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明
這篇文章主要介紹了Vue 構(gòu)造選項(xiàng) - 進(jìn)階使用說明，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08