如何使用 VeeValidate 顯示自訂訊息 ?
栏目: JavaScript · 发布时间: 7年前
内容简介：VeeValidate 雖然有內建錯誤訊息，但也能自訂自己的錯誤訊息。Vue 2.5.17VeeValidate 2.1.2
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);
const dictionary = {
zh_TW: {
messages: {
required: field => `請輸入 ${field}`,
email: 'Email 格式錯誤',
},
},
};
Validator.localize(dictionary);
export default {
name: 'basic-example',
};
</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 。
21 行
const dictionary = {
zh_TW: {
messages: {
required: field => `請輸入 ${field}`,
email: 'Email 格式錯誤',
},
},
};
Validator.localize(dictionary);
將自訂訊息定義在 dictionary
- 第一層 key 為
語系，如en或zh_TW - 第二層 key 為
messages - 第三層 key 為 Validation Rules，value 可為 string 或 function
最後再將 dictionary 傳入 Validator.localize() 。
Conclusion
- 由於
語系與dictionary都是傳入Validator.localize()，因此執行順序就很重要，必須要dictionary最後傳入，才能將自訂訊息蓋掉預設訊息，這是使用 VeeValidate 比較雷的地方
Sample Code
完整的範例可以在我的 GitHub 上找到
Reference
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持 码农网
猜你喜欢:
- RecyclerView使用指南（一）—— 基本使用
- 如何使用Meteorjs使用URL参数
- 使用 defer 还是不使用 defer?
- 使用 Typescript 加强 Vuex 使用体验
- [译] 何时使用 Rust？何时使用 Go？
- UDP协议的正确使用场合（谨慎使用）
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
你凭什么做好互联网
曹政 / 中国友谊出版公司 / 2016-12 / 42.00元
为什么有人可以预见商机、超越景气，在不确定环境下表现更出色？ 在规则之外，做好互联网，还有哪些关键秘诀？ 当环境不给机会，你靠什么翻身？ 本书为“互联网百晓生”曹政20多年互联网经验的总结，以严谨的逻辑思维分析个人与企业在互联网发展中的一些错误思想及做法，并给出正确解法。 从技术到商业如何实现，每个发展阶段需要匹配哪些能力、分解哪些目标、落实哪些策略都一一点出，并在......一起来看看 《你凭什么做好互联网》 这本书的介绍吧!
