使用vee-validate表单插件是如何设置中文提示?

Posted jinrupeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vee-validate表单插件是如何设置中文提示?相关的知识,希望对你有一定的参考价值。

最近在写vue表单验证的时候,在网上找到一款不错的插件vee-validate,在使用的过程中发现配置不了中文提示,这就很苦恼了,基本上网上的配置办法我都看过,都是有问题的,比如这种

import zh_CN from ‘vee-validate/dist/locale/zh_CN‘; //引入中文包,提示信息可以以中文形式显示
import { Validator } from ‘vee-validate‘;
Validator.addLocale(zh_CN); // 设置提示信息中文方式显示

这种是找不到addLocale方法的,就说明是否版本不对?这个时候我去看了下官网文档关于翻译本土化这点,之前由于是英文文档大致过了一遍,但是没有找到我想要的配置信息,这个时候我认为是版本的问题,所以我在github上查看了版本,发现最新版本就是我安装的这个版本(除开未正式的版本),

"vee-validate": "^2.0.0-rc.26",

这时候发现作者已经在这个版本是添加了i18n国际化这个玩意了,所以你得先安装vue-i18n 具体方式自行搜索

import VeeValidate from ‘vee-validate‘;
import zh_CN from ‘vee-validate/dist/locale/zh_CN‘
import VueI18n from ‘vue-i18n‘;
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: ‘zh_CN‘,
})
Vue.use(VeeValidate, {
  i18n,
  i18nRootKey: ‘validation‘,
  dictionary: {
    zh_CN
  }
});

这个时候实例化il8n指定为中文即可,本来没想到要发,但是鉴于小白和新手跟我一样避免再这个问题浪费时间,所以就写出来了,至于用Validator.localize 这个方法我还是不太明白何时用,今天第一次安装就权当算个记录了,还是博客园做的好,容易搜索,就放这了

以上是关于使用vee-validate表单插件是如何设置中文提示?的主要内容,如果未能解决你的问题,请参考以下文章

vue表单验证,vee-Validate

Vue-test-utils 在 nuxt 中使用 mixin 进行 vee-validate

防止表单数据无效时单击多个(提交)按钮(vee-validate)

vee-validate表单校验的基本使用

vee-validate 这个插件怎么判断字段验证失败,就不能执行提交

vue2移动端使用vee-validate进行表单验证