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

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

内容简介：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

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

查看所有标签

猜你喜欢:

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

码农书籍

知识的边界

[美] 戴维·温伯格 / 胡泳、高美 / 山西人民出版社 / 2014-12-1 / 42.00元

大数据时代反思知识因为事实不再是事实，专家随处可见所有确定性都被连根拔起，话题再无边界，没有人对任何事情能达成一致。在互联网的引领下，知识现在已经具有了社交性，流动且开放。温伯格向我们展示了这些特点如何可以为我们所用。 ——马克•贝尼奥夫（云计算之父，著有《云攻略》）这本富有洞见的著作，奠定了温伯格作为数字时代最重要的思想家之一的地位。如果你想要理解信息洪流涌......一起来看看《知识的边界》这本书的介绍吧!

码农工具