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

Question

我正在努力使用 NUXT.jS 本地化表单验证vee-validate。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"
});

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

Answer 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"
});

Answer 2

如果您想要动态本地化，我已经写了一篇关于此的文章。在这里你可以阅读它。