如何使用 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

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

查看所有标签

猜你喜欢:

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

码农书籍

C++ API设计

[美] Martin Reddy / 刘晓娜、臧秀涛、林健 / 人民邮电出版社 / 2013-8 / 89.00

现代软件开发中的一大难题就是如何编写优质的API。API负责为某个组件提供逻辑接口并隐藏该模块的内部细节。多数程序员依靠的是经验和冒险，从而很难达到健壮、高效、稳定、可扩展性强的要求。Martin Reddy博士在自己多年经验基础之上，对于不同API风格与模式，总结出了API设计的种种最佳策略，着重针对大规模长期开发项目，辅以翔实的代码范例，从而有助于设计决策的成功实施，以及软件项目的健壮性及稳定......一起来看看《C++ API设计》这本书的介绍吧!

码农工具