VeeValidate 使用手冊

VeeValidate

vee validate 一個輕量級的 vue表單驗證插件。基於模板的驗證既熟悉又易於設置。驗證html輸入和vue組件，生成本地化錯誤，可擴展，它可以完成所有操作。

安裝：npm i vee-validate --save

入門使用

// ValidationProvider是驗證提供者, 該組件通過作用域插槽為模板提供驗證錯誤。
// VeeValidate不附帶任何驗證規則, 由extend函數添加驗證規則 import { ValidationProvider, extend } from 'vee-validate'; // vee-validate/dist/rules是vee-validate官方提供暴露的多種驗證規則 import { required, email } from 'vee-validate/dist/rules'; // 添加必填規則 extend('required', required); // 添加郵箱規則 extend('email', email); // 注冊驗證提供者組件, 組件通過作用域插槽為模板提供驗證錯誤 Vue.component('ValidationProvider', ValidationProvider); 復制代碼

<!-- rules為規則字符串表達式, 用|分開為多個規則同時共用 v被稱為槽的道具, 它可以讓類似的組件ValidationProvider將信息發送到該插槽, 這里可以使用ES6的對象擴展, 使事情變得更簡潔 --> <ValidationProvider rules="required|email" v-slot="{ errors }">  <input v-model="email">  <p>{{ errors[0] }}</p> </ValidationProvider> 復制代碼

v插槽更多功能：https://logaretm.github.io/vee-validate/guide/state.html#flags

第三方UI庫使用：https://logaretm.github.io/vee-validate/guide/3rd-party-libraries.html#element-ui

自定義規則

基本使用語法

import { extend } from 'vee-validate';
// extend函數接受規則的名稱以及用於該規則的驗證函數和其他參數。 extend('positive', {  validate(value) {  return value >= 0;  },  // 字符串占位符, 占位符內容由ValidationProvider組件name參數提供  message: '{_field_}不能為空' }); 復制代碼

<ValidationProvider rules="positive" v-slot="{ errors }">
 <input v-model="value" type="text">  <span>{{ errors[0] }}</span> </ValidationProvider> 復制代碼

單參數使用

import { extend } from 'vee-validate';
// 使用驗證規則的擴展形式並定義params包含參數名稱的屬性 // args發送給該validate方法的第二個參數是一個對象，其中包含在params數組中指定的鍵。 extend('min', { // 接收參數, 定義最小值規則  validate(value, args) {  return value.length >= args.length;  },  params: ['length'] }); 復制代碼

<!-- 模板中使用(規則字符串表達式) -->
<ValidationProvider rules="required|min:3" v-slot="{ errors }">  <input v-model="value" type="text">  <span>{{ errors[0] }}</span> </ValidationProvider> <!-- 模板中使用(對象表達式) --> <ValidationProvider rules="{required:true,min:3}" v-slot="{ errors }">  <input v-model="value" type="text">  <span>{{ errors[0] }}</span> </ValidationProvider> 復制代碼

多參數使用

import { extend } from 'vee-validate';
 extend('minmax', {  validate(value, {length}) {  return length >= args.min && length <= args.max;  },  params: ['min', 'max'] }); 復制代碼

本土化設置

vee-validate具有40多個可用於交付的驗證的語言環境，但是默認情況下不會安裝它們，因為它們的開銷很大，因此需要導入所需的語言環境。公開的localize幫助程序使您可以向驗證消息中添加新的語言環境

import { localize } from 'vee-validate';
import en from 'vee-validate/dist/locale/en.json'; import zh_CN from 'vee-validate/dist/locale/zh_CN.json'; // 安裝英語與中文簡體配置. localize({ en, zh_CN }); 復制代碼

更多配置：https://logaretm.github.io/vee-validate/guide/localization.html#using-the-default-i18n

驗證提供者(ValidationProvider)

ValidationProvider組件是包裝您的輸入並使用作用域插槽提供驗證狀態的組件。

這些是插槽范圍內可用的屬性，可通過以下方式訪問v-slot：

Name	Type	Description
errors	string[]	錯誤消息列表。
failedRules	[x: string]: string	失敗規則的映射對象，其中 (rule, message) 為 (key, value)
aria	{ [x: string]: string }	為可訪問性映射aria屬性的對象。
classes	{ [x: string]: boolean }	根據驗證狀態配置的類的映射對象。
validate	(e: any) => Promise	用作事件處理程序以觸發驗證的函數。對於不使用v模型的字段很有用。
reset	() => void	重置提供程序上的驗證狀態的函數。
valid	boolean|undefined	如果該字段有效。
invalid	boolean|undefined	如果該字段無效。
pristine	boolean	如果從未操縱該字段值。
dirty	boolean	如果字段值已被操縱。
pending	boolean	指示是否正在進行字段驗證。
required	boolean	如果該字段為必須項。
validated	boolean	如果該字段已至少驗證一次。
passed	boolean	如果該字段已經過驗證並且有效。
failed	boolean	如果該字段已經過驗證並且無效。

由於插槽作用域可以利用ES6擴展的優勢，因此您可以選擇加入其中的任何屬性，並在認為合適時傳遞到插槽模板

<ValidationProvider rules="required" v-slot="{ errors }">
 <div>  <input type="text" v-model="value">  <span>{{ errors[0] }}</span>  </div> </ValidationProvider> 復制代碼

驗證觀察者(ValidationObserver)

ValidationObserver是你的包裝形式和使用它在嵌套的所有字段提供匯總的驗證狀態的組件范圍的插槽。

由於ValidationObserver的solt插槽屬性基本與驗證提供者(ValidationProvider)一直，這里只挑一些重點內容。

Name	Type	Description
validate	() => Promise<boolean>	為所有提供程序觸發驗證的方法。除非“silent”為true，否則更改子程序狀態。
handleSubmit	(cb: Function) => Promise<void>	像validate一樣調用驗證並更改提供程序的狀態，只接受在驗證成功時才運行的回調。
reset	() => void	為所有提供程序重置驗證狀態的方法。

<ValidationObserver v-slot="{ handleSubmit }">
 <!-- 當所有表單完成時, 提交才會調用onSubmit方法 -->  <form @submit.stop.prevent="handleSubmit(onSubmit)">  <!-- 該項可有多個ValidationProvider組件組成的input -->  </form> </ValidationObserver> <ValidationObserver v-slot="{ passed }">  <!-- 當提交時, 調用onSubmit傳入表單驗證狀態 -->  <form @submit.stop.prevent="onSubmit(passed)">  <!-- 該項可有多個ValidationProvider組件組成的input -->  </form> </ValidationObserver> 復制代碼

Jest 測試VeeValidate

jest.config.js

transform: {
 ...  'vee-validate/dist/rules': 'babel-jest', }, transformIgnorePatterns: [  '<rootDir>/node_modules/(?!vee-validate/dist/rules)', ] 復制代碼

comp.vue

<ValidationProvider rules="required" v-slot="{ errors }" ref="provider">
  <input v-model="value" type="text">
  <span class="error">{{ errors[0] }}</span>
</ValidationProvider>
復制代碼

comp.test.js

// 創建環境
const wrapper = mount(MyComponent, { sync: false }); // 查找input, 設置值未空 wrapper.find('input').setValue(''); // 刷新, 掛起驗證 await flushPromises(); // 從參考中獲取錯誤消息 const error = wrapper.vm.$refs.provider.errors[0]; // 驗證錯誤 expect(error).toBeTruthy(); 復制代碼

完整實例

import Vue from 'vue'
// 引入驗證組件, 匯總驗證狀態組件, 驗證添加工具, 語言環境設置 import {  ValidationProvider,  ValidationObserver,  extend, localize } from 'vee-validate'; import * as rules from "vee-validate/dist/rules"; import zh_CN from "vee-validate/dist/locale/zh_CN.json"; // 進行按需引入規則 ['required', 'email', 'min', 'max'].forEach(key => {  extend(key, rules[key]) })  // 本土化設置 // localize('zh_CN', zh_CN) localize({zh_CN}) // 全局安裝VeeValidate組件 Vue.component("ValidationObserver", ValidationObserver); Vue.component("ValidationProvider", ValidationProvider); 復制代碼

<template>
 <validation-observer ref="observer" v-slot="{ passed }">  <form @submit.stop.prevent="onSubmit(passed)">  <!-- 設置名稱表單與驗證 -->  <validation-provider :rules="{required:true, min:3}" v-slot="{ error }">  <input v-model="name" type="text">  <span>{{error[0]}}</span>  </validation-provider>  <!-- 設置郵箱表單與驗證 -->  <validation-provider rules="required|email" v-slot="{ error }">  <input v-model="email" type="text">  <span>{{error[0]}}</span>  </validation-provider>  </form>  </validation-observer> </template> <script> export default {  data: ()=> ({  name: "",  email: ""  }),  methods: {  // 當表單提交時調用, 接收驗證狀態  onSubmit(passed){  if (!passed) return console.log('表單項未通過驗證');  }  } } </script> 復制代碼

本文使用 mdnice 排版