快速設定自己的驗證規則

雖然 VeeValidate 已經內建很多驗證規則,但實務上可能有自己的商業邏輯需要驗證,又或者內建的驗證規則不是我們要的,如內建的 Email 驗證規則可能覺得太寬鬆,我們想寫自己的 Regular Expression 驗證 Email …等,此時就需要自訂驗證規則。

Version


Vue 2.5.17
VeeValidate 2.1.2

Introduction


demo.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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 行

1
import VeeValidate, { Validator } from 'vee-validate';

除了 import 基本的 VeeValidate 外,還要額外 import Validator,這是個 named import。

15 行

1
import zh_TW from 'vee-validate/dist/locale/zh_TW';

將繁體中文的資源檔 import 進來。

31 行

1
Validator.localize('zh_TW', zh_TW);

使用 Validator.localize() 設定語系為 zh_TW

25 行

1
2
3
4
const myValidator = {
getMessage,
validate,
};

設定自訂的 Validator,VeeValidate 規定 Validator 必須包含 getMessage()validate() 兩個 method。

18 行

1
const getMessage = field => `${field} 格式不正確`;

field 傳入 HTML tag 的 name attribute 值,回傳自訂錯誤訊息。

20 行

1
2
3
4
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 行

1
Validator.extend('myEmail', myValidator);

使用 Validator.extend() 設定自訂的 rule 與 validator。

  • 第一個參數為自訂 rule 名稱,為 string
  • 第二個參數為自訂 validator,為 object

rule000

Conclusion


  • Validator.extend() 的第一個參數是設定 rule 名稱
  • Validator.extend() 的第二個參數要傳入 validator, 其 interface 一定要有 getMessage()validate() 兩個 method

Sample Code


完整的範例可以在我的 GitHub 上找到

Reference


VeeValidate, Custom Rules

2018-11-08