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

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

查看所有标签

猜你喜欢:

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

码农书籍

赢在用户

[美]Steve Mulder、[美]Zivv Yarr / 范晓燕 / 机械工业出版社 / 2007-08-01 / 29.00

您如何保证您的网站确实给予用户他们所需要的，并对您产生商业成果？您需要了解谁是您的用户，您的用户的目标、行为和观点是什么，还要把他们的需求当成您的第一要务。人物角色将用户研究带入了一个更高的境界，成为实施真正以用户为中心的在线商业策略最高效的工具。本书将伴随您走过创建人物角色的每一个步骤，包括进行定性、定量的用户研究，生成人物角色分类，使人物角色真实可信等。您也将学会如何有效地通过这个工具，来完成......一起来看看《赢在用户》这本书的介绍吧!

码农工具

XML 在线格式化

在线 XML 格式化压缩工具

RGB CMYK 转换工具

RGB CMYK 互转工具