VeeValidate 的使用場景以及配置詳解

更新時間：2019年01月11日 10:09:15 作者：學無止境

這篇文章主要介紹了VeeValidate 的使用場景以及配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

創(chuàng)建vue項目:

vue init webpack vee

cd ./vee 

npm run dev
 
# or
yarn run dev

安裝 VeeValidate

npm install vee-validate --save
# or
yarn add vee-validate --save

本文中使用的 VeeValidate 版本為 2.1.5

在 App.vue 中引入

import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);

例子

第一個測試例子

<template>
 <div class="test1">
 <div>
  <input
  type="text"
  name="nickname"
  v-model="formData.nickname"
  v-validate="'required|min:3|max:10'"
  >
  <p>{{errors.first('nickname')}}</p>
 </div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 export default {
 name: "test1",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('驗證通過');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 }
 }
</script>

<style scoped lang="css">
 .test1 {
 width: 900px;
 margin: 0 auto;
 }
</style>

更多配置請參考官網!

我們只是用些常用配置和常用的驗證!

中文配置

全局配置

import VeeValidate, {Validator} from 'vee-validate';
import zh_CN from 'vee-validate/dist/locale/zh_CN';
Vue.use(VeeValidate, {
 dictionary: {
 zh_CN: zh_CN
 }
});
Validator.localize('zh_CN');

這樣就可以使用中文提示了!

自定義錯誤提示

<template>
 <div class="test2">
 <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
 </div>
 <div>{{errors.first('nickname')}}</div>
 <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
 </div>
 <div>{{errors.first('password')}}</div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 const validate = {
 custom: {
  nickname: {
  required: () => '昵稱不得為空', //寫法1
  min: "昵稱不得小于3個字符", //寫法2
  max: () => '昵稱不得大于10個字符'
  },
  password: {
  required: () => '密碼不得為空',
  min: "密碼不得小于5個字符",
  max: () => '密碼不得大于200個字符'
  }
 },
 };

 export default {
 name: "test2",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('驗證通過');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', validate);
 }
 }
</script>

自定義驗證規(guī)則

<template>
 <div class="test2">
 <div><input type="text" v-model="formData.nickname" data-vv-name="nickname" v-validate="'required|min:3|max:10'">
 </div>
 <div>{{errors.first('nickname')}}</div>
 <div><input type="text" v-model="formData.password" data-vv-name="password" v-validate="'required|min:5|max:200'">
 </div>
 <div>{{errors.first('password')}}</div>
 <div><input type="text" v-model="formData.re_password" data-vv-name="re_password"
    v-validate="'required|confirm'">
 </div>
 <div>{{errors.first('re_password')}}</div>
 <div><input type="text" v-model="formData.mobile" data-vv-name="mobile" v-validate="'required|mobile'">
 </div>
 <div>{{errors.first('mobile')}}</div>
 <div>
  <button @click="handleSubmit">Submit</button>
 </div>
 </div>
</template>

<script>
 const validate = {
 custom: {
  nickname: {
  required: () => '昵稱不得為空', //寫法1
  min: "昵稱不得小于3個字符", //寫法2
  max: () => '昵稱不得大于10個字符'
  },
  password: {
  required: () => '密碼不得為空',
  min: "密碼不得小于5個字符",
  max: () => '密碼不得大于200個字符'
  },
  re_password: {
  required: () => '請再次輸入密碼!',
  },
  mobile: {
  required: () => '請輸入手機號碼!',
  }
 },
 };

 export default {
 name: "test3",
 data() {
  return {
  formData: {
   nickname: '',
   password: '',
   re_password: '',
   mobile: ''
  }
  }
 },
 methods: {
  handleSubmit() {
  this.$validator.validate()
   .then((valid) => {
   if (true === valid) {
    console.log('驗證通過');
   } else {
    console.log(this.$validator.errors.all());
   }
   })
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', validate);
  this.$validator.extend('mobile', {
  getMessage: field => '手機號有誤',
  validate: value => {
   return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
  })
  this.$validator.extend('confirm', {
  getMessage: field => '兩次密碼輸入不一致',
  validate: value => {
   return value === this.formData.password
  }
  })
 }
 }
</script>

顯示第一個錯誤!

有時候我們需要在彈出層中提示用戶所以要顯示第一個錯誤

this.$validator.errors.items[0].msg

例子發(fā)驗證碼和注冊!

這個例子中發(fā)驗證碼是一個驗證注冊又是一個驗證所以有點意義!

在發(fā)送驗證碼的時候需要驗證手機號碼和圖形驗證碼注冊的時候需要驗證除圖形驗證碼之外的數(shù)據(jù)

template

<template>
 <div class="reg">
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="mobile"
   data-vv-name="mobile"
   v-model="mobile"
   v-validate="'required|mobile'"
   placeholder="手機號碼"
  >
  </div>
  <div class="err">{{errors.first('mobile')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   v-model="img_captcha"
   name="img_captcha"
   placeholder="圖形驗證碼"
   v-validate="'required'"
  >
  </div>
  <div class="err">{{errors.first('img_captcha')}}</div>
 </div>
 <div class="form_item">
  <div class="input send_sms">
  <input
   type="text"
   v-validate="'required|length:6'"
   v-model="sms_captcha"
   name="sms_captcha"
   placeholder="短信驗證碼"
  >
  <button class="send_sms_btn" @click="handleSendSms">獲取驗證碼</button>
  </div>
  <div class="err">{{errors.first('sms_captcha')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="password"
   v-validate="'required|min:8'"
   v-model="password"
   placeholder="登錄密碼"
   ref="password"
  >
  </div>
  <div class="err">{{errors.first('password')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="re_password"
   v-validate="'required|confirmed:password'"
   v-model="re_password"
   placeholder="再次輸入登錄密碼"
  ></div>
  <div class="err">{{errors.first('re_password')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="nickname"
   v-validate="'required|min:3|max:10'"
   v-model="nickname"
   placeholder="請輸入昵稱"
  ></div>
  <div class="err">{{errors.first('nickname')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="id_card"
   v-validate="'required|id_card'"
   v-model="id_card"
   placeholder="請輸入身份證號碼"
  ></div>
  <div class="err">{{errors.first('id_card')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="date"
   name="birthday"
   v-validate="'required|date_format:YYYY-MM-DD'"
   v-model="birthday"
   placeholder="請輸入生日"
  ></div>
  <div class="err">{{errors.first('birthday')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="url"
   v-validate="'required|url'"
   v-model="url"
   placeholder="請輸入個人網址"
  ></div>
  <div class="err">{{errors.first('url')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="email"
   v-validate="'required|email'"
   v-model="email"
   placeholder="請輸入電子郵箱"
  ></div>
  <div class="err">{{errors.first('email')}}</div>
 </div>
 <div class="form_item">
  <div class="input">
  <input
   type="text"
   name="age"
   v-validate="'required|between:18,60'"
   v-model="age"
   placeholder="請輸入年齡"
  ></div>
  <div class="err">{{errors.first('age')}}</div>
 </div>
 <div class="form_item">
  <button class="reg_btn" @click="handleSubmit">注冊</button>
 </div>

 </div>
</template>

style 代碼(這個是隨便寫的原生css大家不要吐槽哈)

<style>
 .err {
 color: red;
 font-size: 12px;
 text-align: left;
 }

 .reg {
 width: 500px;
 margin: 0 auto;
 }

 .send_sms {
 position: relative;
 }

 .send_sms_btn {
 position: absolute;
 width: 100px;
 height: 30px;
 right: -11px;
 top: 2px;
 cursor: pointer;
 border: none;
 border-radius: 4px;
 background-color: #e4393c;
 outline: none;
 color: #fff;
 }

 .form_item {
 margin-bottom: 10px;
 width: 400px;
 }

 input {
 width: 400px;
 height: 30px;
 border: 1px solid #999;
 border-radius: 4px;
 outline: none;
 padding-left: 10px;
 }

 .reg_btn {
 width: 100px;
 height: 30px;
 border: none;
 border-radius: 4px;
 background-color: #e4393c;
 outline: none;
 cursor: pointer;
 color: #fff;
 }
</style>

<script>
 import {messages} from '../validate/reg'

 export default {
 name: "reg",
 data() {
  return {
  url: '',
  age: '',
  email: '',
  birthday: '',
  id_card: '',
  nickname: '',
  mobile: '',
  img_captcha: '',
  sms_captcha: '',
  password: '',
  re_password: '',
  }
 },
 mounted() {
  this.$validator.localize('zh_CN', messages);
  this.$validator.extend('mobile', {
  getMessage: field => '手機號有誤',
  validate: value => {
   return /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
  });
  this.$validator.extend('id_card', {
  getMessage: field => '身份證號碼格式有誤',
  validate: value => {
   return /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)
  }
  });
 },
 methods: {
  handleSubmit() {
  this.$validator.errors.clear();
  this.$validator.validateAll({
   mobile: this.mobile,
   password: this.password,
   sms_captcha: this.sms_captcha,
   re_password: this.re_password,
   url: this.url,
   age: this.age,
   email: this.email,
   birthday: this.birthday,
   id_card: this.id_card,
   nickname: this.nickname,
  }).then((valid) => {
   console.log(valid);
   if (true === valid) {
   console.log('驗證通過');
   } else {
   console.log(this.$validator.errors.all());
   }
  });
  },
  handleSendSms() {
  this.$validator.errors.clear();
  this.$validator.validateAll({
   mobile: this.mobile,
   img_captcha: this.img_captcha
  }).then((valid) => {
   console.log(valid);
   if (true === valid) {
   console.log('驗證通過');
   } else {
   console.log(this.$validator.errors.all());
   }
  });
  }
 }
 }
</script>

外部引入的js (自定義提示內容)

export const messages = {
 custom: {
 mobile: {
  required: () => '請輸入手機號碼!',
  mobile: () => '手機號碼有誤',
 },
 img_captcha: {
  required: () => '請輸入圖形驗證碼!',
 },
 sms_captcha: {
  required: () => '請輸短信驗證碼!',
  length: () => '短信驗證碼為6位數(shù)字'
 },
 password: {
  required: () => '密碼不得為空',
  min: () => '密碼不得小于8個字符',
 },
 re_password: {
  required: () => '請再次輸入密碼!',
  confirmed: () => '兩次密碼輸入不一致'
 },
 nickname: {
  required: () => '請輸入昵稱',
  min: () => '昵稱最小為3位字符',
  max: (field, params) => {
  return `昵稱最大為${params[0]}位字符`;
  }
 },
 id_card: {
  required: "身份證號碼不得為空"
 },
 birthday: {
  required: "請選擇出生日期",
  date_format: "出生日期有誤"
 },
 url: {
  required: () => "請輸入個人網址",
  url: () => "網址輸入有誤"
 },
 email: {
  required: () => "請輸入電子郵箱",
  email: () => "電子郵箱輸入有誤"
 },
 age: {
  required: () => "請輸入年齡",
  between: () => "年齡必須在18-60歲之間"
 }
 },
};

擴展內容

自定義錯誤信息中顯示配置驗證規(guī)則中的參數(shù)

export const messages = {
 custom: {
 nickname: {
  required: () => "請輸入年齡",
  between: (fiield,params) => `年齡必須在${params[0]}-${params[1]}歲之間"
 }
 },
};

規(guī)則里面第一個參數(shù)是字段名稱第二個參數(shù)是驗證規(guī)則后面的參數(shù);

驗證指定字段

validateAll(field Object) 
validateAll({mobile:this.moble});

還可以使用 data-vv-scope 來指定但是該方法并不適用一些場景;

顯示錯誤信息的時候必須要指定scope的值不然不會顯示錯誤信息

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

Vee
Validate

vue+elementUI實現(xiàn)內嵌table的方法示例
本文主要介紹了vue+elementUI實現(xiàn)內嵌table的方法示例，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-12-12
Vue常用指令V-model用法
本篇文章主要介紹了Vue常用指令_V-model用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-03-03
Vue3實現(xiàn)簡易音樂播放器組件
這篇文章主要為大家詳細介紹了Vue3實現(xiàn)簡易音樂播放器組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-08-08
Vue3+TypeScript實現(xiàn)二維碼生成組件
在?Web?應用中,生成二維碼是常見的需求,本文介紹如何用?Vue3?和?TypeScript?開發(fā)一個二維碼生成組件,支持生成圖片或?canvas?形式的二維碼,并提供豐富的配置選項,感興趣的小伙伴跟著小編一起來看看吧
2024-04-04
在Vue中實現(xiàn)不刷新的iframe頁面的方案
在Vue項目中,我們可能會遇到這樣的需求：需要在應用中嵌入iframe頁面,并且要求在路由切換的過程中,iframe的內容不會被刷新,本文將介紹如何解決這個問題,并給出具體的實現(xiàn)方案,需要的朋友可以參考下
2025-01-01
Vue如何使用本地JSON文件
這篇文章主要介紹了Vue如何使用本地JSON文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07
一文搞明白vue開發(fā)者vite多環(huán)境配置
Vue是一款流行的JavaScript框架,用于開發(fā)動態(tài)單頁應用程序,本地安裝和環(huán)境配置是學習和使用Vue的第一步,下面這篇文章主要給大家介紹了關于vue開發(fā)者vite多環(huán)境配置的相關資料,需要的朋友可以參考下
2023-06-06
Vue3+vite路由配置優(yōu)化(自動化導入)
這篇文章主要介紹了Vue3+vite路由配置優(yōu)化(自動化導入),需要的朋友可以參考下
2023-09-09
vue如何下載本地pdf文件
這篇文章主要介紹了vue如何下載本地pdf文件問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-04-04
vue(element ui)使用websocket及心跳檢測方式
這篇文章主要介紹了vue(element ui)使用websocket及心跳檢測方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2024-07-07