如何使用 VeeValidate 顯示自訂訊息 ?
栏目: JavaScript · 发布时间: 6年前
内容简介: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协议的正确使用场合(谨慎使用)
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
形式感+:网页视觉设计创意拓展与快速表现
晋小彦 / 清华大学出版社 / 2014-1-1 / 59.00元
网页设计师从早年的综合性工作中分化出来,形成了相对独立的专业岗位,网页设计也不再是单纯的软件应用,它衍生出了许多独立的研究方向,当网站策划、交互体验都逐渐独立之后,形式感的突破和表现成为网页视觉设计的一项重要工作。随着时代的发展,网页设计更接近于一门艺术。网络带宽和硬件的发展为网页提供了使用更大图片、动画甚至视频的权利,而这些也为视觉设计师提供了更多表现的空间。另外多终端用户屏幕(主要是各种移动设......一起来看看 《形式感+:网页视觉设计创意拓展与快速表现》 这本书的介绍吧!