如何使用 vee-validate 本地化 Nuxt 的表单验证错误消息答案

【问题标题】：How to localize Nuxt's form validation error messages using vee-validate如何使用 vee-validate 本地化 Nuxt 的表单验证错误消息
【发布时间】：2020-03-10 09:29:59
【问题描述】：

我正在努力使用vee-validate 在 NUXT.jS 中本地化表单验证。 vee-validate 官方文档中关于 NUXT 的文档非常少。我想知道是否可以使用 vee-validate 本地化错误消息。

一切正常。 i18n 插件，vee-validate 插件。但我无法将这两者放在一起。

我的Vee Validate 设置

import { extend } from "vee-validate";
import { required, alpha, email } from "vee-validate/dist/rules";

extend("required", {
  ...required,
  message: "This field is required"
});

extend("alpha", {
  ...alpha,
  message: "This field must only contain alphabetic characters"
});

extend("email", {
  ...alpha,
  message: "This email field must contain a valid email address"
});

我从官方文档中尝试了this，但还没有。

【问题讨论】：

标签： nuxt.js vee-validate vue-i18n nuxt-i18n

【解决方案1】：

使用configure 的vee-validate

import { extend, configure } from "vee-validate";
import { required, email, min } from "vee-validate/dist/rules";
import { i18n } from "./i18n";

configure({
  defaultMessage: (field, values) => {
    // override the field name.
    values._field_ = i18n.t(`fields.${field}`);

    return i18n.t(`validation.${values._rule_}`, values);
  }
});

extend("required", {
  ...required,
  message: "This field is required"
});

extend("alpha", {
  ...alpha,
  message: "This field must only contain alphabetic characters"
});

extend("email", {
  ...alpha,
  message: "This email field must contain a valid email address"
});

【讨论】：

【解决方案2】：

如果您想要动态本地化，我已经写了一篇关于此的文章。 Here you can read it。

【讨论】：