詳解vee-validate的使用個人小結(jié)
學(xué)習(xí)vee-validate，首先可以去閱讀官方文檔，更為詳細(xì)可以閱讀官網(wǎng)中的規(guī)則。英文文檔可能會有不理解的地方，推薦大家看這篇博客
下面來簡單總結(jié)一下我的使用：
一、安裝
npm install vee-validate@next --save
后面加@next是為了安裝vue2.0的版本
二、引入
我使用的是vue-cli腳手架工具，需要在main.js中
import VeeValidate from 'vee-validate' Vue.use(VeeValidate);
三、簡單的使用
這個時候其實(shí)已經(jīng)可以使用了，先上demo
<div>
<label for="email">郵箱：</label>
<input v-validate ="'required|email'" type="text" id="email" name="myEmail">
</div>
<span v-show="errors.has('myEmail')">{{ errors.first('myEmail')}}</span>
解釋一下：v-validate后面的required和email是官方已經(jīng)規(guī)定好的幾種默認(rèn)錯誤類型中的兩個，這個可以閱讀官方文檔。
span中用到了errors的幾個方法，這里的參數(shù)都是定義了驗(yàn)證規(guī)則的表單的name。列舉幾個errors的方法:
1、first(‘field')
field中（也就是剛剛說過的name表單）中的第一個錯誤
2、collect(‘field')
field中所有的錯誤
3、has(‘field')
field中是否有錯誤
4、all()
當(dāng)前表單中的所有錯誤
5、any()
當(dāng)前表單中是否有錯誤
6、count()
當(dāng)前表單中的錯誤數(shù)量
7、clear()
清除當(dāng)前表單中的所有錯誤
四、使用中文錯誤提示
沒有配置過的錯誤提示默認(rèn)使用英文顯示的，如果想要用中文顯示需要我們手動配置一下
首先還是在main.js中引入
import zh_CN from 'vee-validate/dist/locale/zh_CN'
import { Validator } from 'vee-validate';
緊接著再加一句
Validator.addLocale(zh_CN);
最后需要把第一步的Vue.use(VeeValidate)改為
Vue.use(VeeValidate, {
locale: 'zh_CN',
});
現(xiàn)在錯誤提示已經(jīng)是中文了
五、配置組件
上一點(diǎn)中的配置中文其實(shí)已經(jīng)是對組件的配置了，再說一說其他的配置。
//配置
const config = {
errorBagName: 'errors', // change if property conflicts.
fieldsBagName: 'fields',
delay: 0,
locale: 'zh_CN',
strict: true,
enableAutoClasses: false,
classNames: {
touched: 'touched', // the control has been blurred
untouched: 'untouched', // the control hasn't been blurred
valid: 'valid', // model is valid
invalid: 'invalid', // model is invalid
pristine: 'pristine', // control has not been interacted with
dirty: 'dirty' // control has been interacted with
},
events: 'blur',
inject: true
};
Vue.use(VeeValidate, config);
delay是指對錯誤提示的延遲時間；locale就是上一點(diǎn)中對中文的配置，只是這里統(tǒng)一寫到了config中；strict=true代表沒有設(shè)置規(guī)則的表單不進(jìn)行校驗(yàn)，events默認(rèn)是input|blur，就是在用戶輸入和表單失去焦點(diǎn)時都進(jìn)行校驗(yàn)，這里我改成了blur，即只有失去焦點(diǎn)時才開始驗(yàn)證。
五、修改默認(rèn)的錯誤提示信息
//修改默認(rèn)錯誤提示
const dictionary = {
zh_CN: {
messages: {
email: () => '郵箱格式不正確哦'
}
}
};
Validator.updateDictionary(dictionary);
demo中修改了email的錯誤提示信息，因?yàn)槭褂玫闹形模ㄇ懊嬉氲模允莦h_CN。最后用updateDictionary方法加入到Validator中。
六、自定義規(guī)則
Validator.extend('qq', {
messages: {
zh_CN:field => 'qq號碼輸入不正確'
},
validate: value => {
return /^[1-9][0-9]{4,14}$/.test(value);
}
});
extend的第一個參數(shù)就是自定義的規(guī)則的名字，可以像使用默認(rèn)規(guī)則一樣使用它，messages中是錯誤提示信息，validate是驗(yàn)證規(guī)則，返回一個布爾值或promise.
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南（純凈版）
網(wǎng)上百度uniapp使用vant時,很多答案都是在根路徑下創(chuàng)建文件夾,而且都是基于小程序環(huán)境的,其實(shí)uniapp可以直接使用的,這篇文章主要給大家介紹了關(guān)于uni-app項(xiàng)目中引入Vant?UI組件庫完美避坑指南的相關(guān)資料,需要的朋友可以參考下2024-02-02
vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載
這篇文章主要介紹了vue如何實(shí)現(xiàn)el-select下拉選項(xiàng)的懶加載，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細(xì)介紹了vuejs事件中心管理組件間的通信，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能
這篇文章主要給大家介紹了關(guān)于vue3使用vue3-print-nb實(shí)現(xiàn)區(qū)域打印功能的相關(guān)資料,在日常操作中,相信很多人在Vue怎么用插件實(shí)現(xiàn)打印功能問題上存在疑惑,需要的朋友可以參考下2023-07-07
無論是Vue還是React，都有組件的概念。組件，就是能和別人組合在一起的物件。在前端頁面開發(fā)過程中，將一個頁面劃分成一個個小的模塊，每個模塊單獨(dú)定義，每個模塊就是一個組件。組件可以進(jìn)行復(fù)用，A頁面和B頁面有一個相似的模塊，可以抽離成一個可局部修改的組件。2021-05-05
vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容:id class style
這篇文章主要介紹了vue實(shí)現(xiàn)修改標(biāo)簽中的內(nèi)容：id class style，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue微信公眾號網(wǎng)頁分享的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
在現(xiàn)代前端開發(fā)中,CSS 預(yù)處理器如 Sass、Less 和 Stylus 等工具,為樣式編寫提供了更強(qiáng)大的功能和更好的開發(fā)體驗(yàn),本文將探討 Vite 是如何處理 CSS 預(yù)處理器的,以及如何在實(shí)際項(xiàng)目中配置和使用它們,需要的朋友可以參考下2025-02-02
實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實(shí)現(xiàn)
這篇文章主要介紹了實(shí)用的 vue tags 創(chuàng)建緩存導(dǎo)航的過程實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
這篇文章主要介紹了在vue或H5中如何使用復(fù)制粘貼功能，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09