Vee-Validate的使用方法詳解

更新時(shí)間：2017年09月22日 09:53:10 作者：oylp

本篇文章主要介紹了Vee-Validate的使用方法詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

引入：

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)來使用
一下為配置信息的意思（可能不全面）

errorBagName： 'erroers'

所有的錯(cuò)誤信息都是放在這個(gè)里面的，如果名稱和頁面上的變量名字沖突，需要修改成其他的，當(dāng)是errors.fist的時(shí)候，error就是字符串，當(dāng)使用error.all()/error.collect()的時(shí)候就是數(shù)組

fieldsBagName: 'fields'

字段的名稱（標(biāo)志）的對象，將在每個(gè)Vue的實(shí)例數(shù)據(jù)注入。如果在頁面上使用了ip的驗(yàn)證，那么，可以通過如下獲取一個(gè)對象:

this.fileds.ip
 >> 獲取到的對象：
{
  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)語言。

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)證

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vee
Validate

相關(guān)文章

通過實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-07-07
如何在vue中使用pdfjs預(yù)覽pdf文件
本文主要講解了如何在vue中使用pdfjs預(yù)覽pdf文件，這樣的優(yōu)勢是無須讓用戶安裝專門的軟件即可實(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指令詳解
本篇文章主要介紹了VUE中v-model和v-for指令詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
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)聽的問題,這可能導(dǎo)致程序邏輯錯(cuò)誤或視圖更新失敗,本文將探討這些問題的常見原因,并提供相應(yīng)的解決方案,需要的朋友可以參考下
2025-03-03
Vue動(dòng)態(tài)修改頁面Title(瀏覽器頁簽名稱)的三種方法
在開發(fā) Vue 項(xiàng)目時(shí),我們經(jīng)常需要根據(jù)不同的頁面動(dòng)態(tài)修改瀏覽器的頁簽標(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)制刷新頁面的實(shí)現(xiàn)過程
這篇文章主要介紹了解決VUE同一路由強(qiáng)制刷新頁面的問題，本文給大家分享實(shí)現(xiàn)過程，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2022-08-08
Vue2實(shí)現(xiàn)組件props雙向綁定
這篇文章主要為大家詳細(xì)介紹了如何在Vue2中實(shí)現(xiàn)組件props雙向綁定,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
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
vue3關(guān)鍵字高亮指令的實(shí)現(xiàn)詳解
這篇文章主要為大家詳細(xì)介紹了vue3實(shí)現(xiàn)關(guān)鍵字高亮指令的相關(guān)資料,w文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,有需要的小伙伴可以參考一下
2023-11-11