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