使用 Dictionary 自訂訊息

VeeValidate 雖然有內建錯誤訊息,但也能自訂自己的錯誤訊息。

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
40
41
<template>
<div>
<div>
<input v-validate="'required|email'" 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';

Vue.use(VeeValidate);

Validator.localize('zh_TW', zh_TW);

/** custom message */
const required = field => `請輸入 ${field}`;
const email = 'Email 格式錯誤';
const messages = {
required,
email,
};

/** custom dictionary */
const dictionary = {
zh_TW: {
messages,
},
};

Validator.localize(dictionary);

export default {
name: 'basic-example',
};
</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 進來。

19 行

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

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

30 行

1
2
3
4
5
const dictionary = {
zh_TW: {
messages,
},
};

將自訂訊息定義在 dictionary

  • 第一層 key 為 語系,如 enzh_TW
  • 第二層為 messages object

24 行

1
2
3
4
const messages = {
required,
email,
};

自訂 messages object,每一個 property 的 key 為 VeeValidate 內建 Validation Rule 名稱

22 行

1
2
const required = field => `請輸入 ${field}`;
const email = 'Email 格式錯誤';

VeeValidate 規定 messages object 每一個 property 的 value 可為 function 或 string。

  • 若為 function,第一個參數傳入為 field,為 HTML 的 name attribute 的值
  • 若為 string,可直接指定

36 行

1
Validator.localize(dictionary);

最後再將 dictionary 傳入 Validator.localize()

custom000

custom001

Sample Code


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

Conclusion


  • 由於 語系dictionary 都是傳入 Validator.localize() ,因此執行順序就很重要,必須要 dictionary 最後傳入,才能將自訂訊息蓋掉預設訊息,這是使用 VeeValidate 比較雷的地方

Reference


VeeValidate, Error Messages

2018-11-07