如何使用 VeeValidate 設定自訂驗證規則 ?
摘要：
雖然 VeeValidate 已經內建很多驗證規則，但實務上可能有自己的商業邏輯需要驗證，又或者內建的驗證規則不是我們要的，如內建的 Email 驗證規則可能覺得太寬鬆，我們想寫自己的 Regular Expression 驗證 Email …等，此時就需要自訂驗證規則。
Version ...
雖然 VeeValidate 已經內建很多驗證規則，但實務上可能有自己的商業邏輯需要驗證，又或者內建的驗證規則不是我們要的，如內建的 Email 驗證規則可能覺得太寬鬆，我們想寫自己的 Regular Expression 驗證 Email …等，此時就需要自訂驗證規則。
Version
Vue 2.5.17
VeeValidate 2.1.2
Introduction
demo.vue
<template>
<div>
<div>
<input v-validate="'required|myEmail'" name="email" type="text">
</div>
<div>
<span>{{ errors.first('email') }}</span>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import VeeValidate, { Validator } from 'vee-validate';
import zh_TW from 'vee-validate/dist/locale/zh_TW';
/** Custom Validator */
const getMessage = field => `${field} 格式不正確`;
const validate = value => {
const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
return regex.test(value);
};
const myValidator = {
getMessage,
validate,
};
Vue.use(VeeValidate);
Validator.localize('zh_TW', zh_TW);
/** Custom Rule */
Validator.extend('myEmail', myValidator);
export default {
name: 'demo',
};
</script>
14 行
import VeeValidate, { Validator } from 'vee-validate';
除了 import 基本的 VeeValidate 外，還要額外 import Validator ，這是個 named import。
15 行
import zh_TW from 'vee-validate/dist/locale/zh_TW';
將繁體中文的資源檔 import 進來。
31 行
Validator.localize('zh_TW', zh_TW);
使用 Validator.localize() 設定語系為 zh_TW 。
25 行
const myValidator = {
getMessage,
validate,
};
設定自訂的 Validator ，VeeValidate 規定 Validator 必須包含 getMessage() 與 validate() 兩個 method。
18 行
const getMessage = field => `${field} 格式不正確`;
field 傳入 HTML tag 的 name attribute 值，回傳自訂錯誤訊息。
20 行
const validate = value => {
const regex = /^\w+\.*\w+@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
return regex.test(value);
};
value 傳入 HTML 的 value attribute 值，自行設定 Regular Expression 驗證 Email 格式。
34 行
Validator.extend('myEmail', myValidator);
使用 Validator.extend() 設定自訂的 rule 與 validator。
- 第一個引數為自訂 rule 名稱，為 string
- 第二個引數為自訂 validator，為 object
Conclusion
-
Validator.extend()的第一個引數是設定 rule 名稱 -
Validator.extend()的第二個引數要傳入 validator， 其 interface 一定要有getMessage()與validate()兩個 method
Sample Code
完整的範例可以在我的 ofollow,noindex">GitHub 上找到