如何使用 VeeValidate 顯示中文訊息 ?
VeeValidate 預設顯示英文訊息,但亦可透過設定顯示中文訊息。
Version
Vue 2.5.17
VeeValidate 2.1.2
Introduction
demo.vue
<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 行
import VeeValidate, { Validator } from 'vee-validate';
除了 import 基本的 VeeValidate
外,還要額外 import Validator
,這是個 named import。
15 行
import zh_TW from 'vee-validate/dist/locale/zh_TW';
將繁體中文的資源檔 import 進來。
19 行
Validator.localize('zh_TW', zh_TW);
使用 Validator.localize()
設定為 zh_TW
。
- 錯誤訊息為中文訊息
Conclusion
- VeeValidate 已經內建繁體中文資源,只要透過
Validator.localize()
設定,就可以輕鬆顯示中文訊息