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

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

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

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

查看所有标签

猜你喜欢:

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

码农书籍

Adobe Flex 大师之路

2009-5 / 69.80元

《Adobe Flex大师之路》以Flex 3.0为基础，涵盖了Flex技术的核心内容。《Adobe Flex 大师之路》能够帮助您你学习并掌握使用Flex所需的牢靠和全面的知识基础，告诉您你如何把这些知识将之转化为代码，并在实际项目中变通应用。通过学习《Adobe Flex 大师之路》，您你可以利用Flex来构建企业级应用的表现层、改善应用的用户体验、集成企业端的复杂服务。这本书是为所有希望学习......一起来看看《Adobe Flex 大师之路》这本书的介绍吧!

码农工具