Vee-Validate的使用方法詳解
更新時間：2017年09月22日 09:53:10 作者：oylp
本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
引入：
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); // 設置提示信息中文方式顯示
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一定要寫，否則不會進行驗證
config配置信息
插件的一些功能可以自定義，需要編寫config，然后Vue.use(VeeValidate, config)來使用
一下為配置信息的意思（可能不全面）
errorBagName： 'erroers'
所有的錯誤信息都是放在這個里面的，如果名稱和頁面上的變量名字沖突，需要修改成其他的，當是errors.fist的時候，error就是字符串，當使用error.all()/error.collect()的時候就是數(shù)組
fieldsBagName: 'fields'
字段的名稱（標志）的對象，將在每個Vue的實例數(shù)據(jù)注入。如果在頁面上使用了ip的驗證，那么，可以通過如下獲取一個對象:
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' 驗證消息的默認語言。
strict: true 表示沒有設置規(guī)則的表單不進行驗證
classes (不懂)
events: 'blur|input' 默認是input|blur 就是在用戶輸入和表單失去焦點的時候都進行驗證，blue表示失去焦點的時候進行驗證
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要為大家介紹了JS圖片懶加載庫VueLazyLoad示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪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)查詢與更改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
本篇文章給大家分享了vue移動端路由切換實例以及相關知識點，對此有興趣的朋友可以參考學習下。2018-05-05
vue項目無論是用element中的Select選擇器,還是使用公司維護的組件,都可以輕松實現(xiàn)單選和多選的需求,這篇文章主要給大家介紹了關于Vant彈出列表多選輸入框下拉選擇的相關資料,需要的朋友可以參考下2024-01-01
element?ui中的table表格數(shù)據(jù)是動態(tài)生成的,最近遇到個需求,要求我們對單元格進行合并,所以下面這篇文章主要給大家介紹了關于Element?UI中table單元格合并的解決過程,需要的朋友可以參考下2022-08-08
elementUi vue el-radio 監(jiān)聽選中變化的實例代碼
這篇文章主要介紹了elementUi vue el-radio 監(jiān)聽選中變化，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
vue異步組件與組件懶加載問題(import不能導入變量字符串路徑)
這篇文章主要介紹了vue異步組件與組件懶加載問題(import不能導入變量字符串路徑)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
公司業(yè)務新開了一個商家管理微信H5移動端項目，日歷控件是商家管理員查看通過日程來篩選獲取某日用戶的訂單等數(shù)據(jù)。下面小編給大家?guī)砹嘶趘ue實現(xiàn)一個炫酷的日歷組件，感興趣的朋友參考下吧2018-10-10
這篇文章主要介紹了Vue 構造選項 - 進階使用說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08