如何使用 VeeValidate 顯示自訂訊息 ?

栏目: JavaScript · 发布时间: 5年前

内容简介：VeeValidate 雖然有內建錯誤訊息，但也能自訂自己的錯誤訊息。Vue 2.5.17VeeValidate 2.1.2

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

Version

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() 。

如何使用 VeeValidate 顯示自訂訊息 ?

Conclusion

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

Sample Code

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

Reference

VeeValidate , Error Messages

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

数据库系统实现

加西亚-莫利纳(Hector Garcia-Molina)、Jeffrey D.Ullman、Jennifer Widom / 杨冬青、吴愈青、包小源 / 机械工业出版社 / 2010-5 / 59.00元

《数据库系统实现(第2版)》是斯坦福大学计算机科学专业数据库系列课程第二门课的教科书。书中对数据库系统实现原理进行了深入阐述，并具体讨论了数据库管理系统的三个主要成分——存储管理器、查询处理器和事务管理器的实现技术。此外，第2版充分反映了数据管理技术的新进展，对内容进行了扩充，除了在第1版中原有的“信息集成”一章（第10章）中加入了新的内容外，还增加了两个全新的章：“数据挖掘”（第11章）和“数据......一起来看看《数据库系统实现》这本书的介绍吧!

码农工具

如何使用 VeeValidate 顯示自訂訊息 ?

Version

Introduction

demo.vue

Conclusion

Sample Code

Reference

数据库系统实现

Markdown 在线编辑器

正则表达式在线测试