使用 Validator.localize() 設定語系

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
<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);

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 進來。

19 行

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

使用 Validator.localize() 設定為 zh_TW

locale000

  1. 錯誤訊息為中文訊息

Conclusion


  • VeeValidate 已經內建繁體中文資源,只要透過 Validator.localize() 設定,就可以輕鬆顯示中文訊息

Sample Code


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

Reference


VeeValidate, Localization

2018-11-07