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一定要寫，否則不會進行驗證
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ù)據(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' 驗證消息的默認(rèn)語言。
strict: true 表示沒有設(shè)置規(guī)則的表單不進行驗證
classes (不懂)
events: 'blur|input' 默認(rèn)是input|blur 就是在用戶輸入和表單失去焦點的時候都進行驗證，blue表示失去焦點的時候進行驗證
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過實例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-07-07
本文主要講解了如何在vue中使用pdfjs預(yù)覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實現(xiàn)預(yù)覽，下面就看看如何實現(xiàn)這個需求2021-06-06
Vue新手指南之創(chuàng)建第一個vue-cli腳手架程序
vue-cli 是一個官方發(fā)布 vue.js 項目腳手架,使用 vue-cli 可以快速創(chuàng)建 vue 項目。這篇文章主要給大家介紹了關(guān)于Vue新手指南之創(chuàng)建第一個vue-cli程序的相關(guān)資料,需要的朋友可以參考下2021-05-05
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-06-06
Vue數(shù)據(jù)變化監(jiān)聽錯誤的常見原因與解決方案
在?Vue.js?開發(fā)中,watch?是一個強大的工具,用于監(jiān)聽數(shù)據(jù)的變化并執(zhí)行相應(yīng)的操作,然而,許多開發(fā)者在使用?watch?時會遇到數(shù)據(jù)變化未被正確監(jiān)聽的問題,這可能導(dǎo)致程序邏輯錯誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下2025-03-03
Vue動態(tài)修改頁面Title(瀏覽器頁簽名稱)的三種方法
在開發(fā) Vue 項目時,我們經(jīng)常需要根據(jù)不同的頁面動態(tài)修改瀏覽器的頁簽標(biāo)題（title）,那么,如何在 Vue 項目中實現(xiàn)動態(tài)修改 document.title 呢？本文將介紹三種實用方法,并結(jié)合代碼示例,助你輕松實現(xiàn),需要的朋友可以參考下2025-03-03
這篇文章主要介紹了解決VUE同一路由強制刷新頁面的問題，本文給大家分享實現(xiàn)過程，通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了如何在Vue2中實現(xiàn)組件props雙向綁定,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
Vue3中的ref和reactive響應(yīng)式原理解析
這篇文章主要介紹了Vue3中的ref和reactive響應(yīng)式,本節(jié)主要介紹了響應(yīng)式變量和對象，以及變量和對象在響應(yīng)式和非響應(yīng)式之間的轉(zhuǎn)換，需要的朋友可以參考下2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue3實現(xiàn)關(guān)鍵字高亮指令的相關(guān)資料,w文中的示例代碼講解詳細(xì),具有一定的借鑒價值,有需要的小伙伴可以參考一下2023-11-11