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

Question

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

一切都很正常。i18n插件，vee验证插件。但是我不能把这两个放在一起。

我的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，但目前还没有结果。

Answer 1

使用vee-validate的configure

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

如果你想要动态本地化，我写了一篇关于这方面的文章。Here you can read it。