使用 i18n 进行 Vuelidate：在区域设置消息中找不到密钥

因此，在我的 i18n-validators.js 文件中，我想将带有翻译消息的验证器导出为我选择的语言，并在我的 vue 组件中使用它们来验证表单。

My code:

// import * as VuelidateValidators from 'https://cdn.jsdelivr.net/npm/@vuelidate/validators';
// import * as VueI18n from 'https://unpkg.com/vue-i18n@9';

const messages = {
  en: {
    validations: {
      required: 'The field {property} is required.',
    }
  },
  cs: {
    validations: {
      required: 'Toto pole {property} je povinné',
    }
  },
}


const i18n = VueI18n.createI18n({
  locale: 'cz',
  fallbackLocale: 'en',
  messages
})

const withI18nMessage = VuelidateValidators.createI18nMessage({ 
  t: VueI18n.createI18n().global.t.bind(i18n)
})

export const required = withI18nMessage(VuelidateValidators.required)

Console:

Not found 'validations.required' key in 'en-US' locale messages. vue-i18n@9
Fall back to translate 'validations.required' key with 'en' locale. vue-i18n@9
Not found 'validations.required' key in 'en' locale messages.

我希望验证器向我抛出指定的消息而不是“validations.required”消息

首先确保你已经安装了vuelidade and vue-i18n

按照您的示例，您可以将上面的文件更改为：

import * as validators from "@vuelidate/validators";
import { createI18n } from "vue-i18n";

const { createI18nMessage } = validators;

const messages = {
  en: {
    validations: {
      required: "The field {property} is required.",
    },
  },
  cs: {
    validations: {
      required: "Toto pole {property} je povinné",
    },
  },
};

const i18n = createI18n({
  locale: "cs",
  fallbackLocale: "en",
  messages,
});

const withI18nMessage = createI18nMessage({ t: i18n.global.t.bind(i18n) });
export const required = withI18nMessage(validators.required);

作为一个组件，您可以按照以下示例进行操作：

<template>
  ...
  <div class="mb-3">
    <input
      v-model="formData.name"
      className="form-control"
      placeholder="Insert your name.."
    />
  </div>

  <span v-for="error in v$.name.$errors" :key="String(error.$uid)">
    <span class="text-danger">{{ error.$message }}</span>
  </span>

  <div class="mt-5 submit">
    <button class="btn btn-primary btn-sm" type="button" @click="submitForm">
      Next
    </button>
  </div>
  ...
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import useVuelidate from "@vuelidate/core";
import { required } from "@/utils/validators/i18n-validators";

export default defineComponent({
  name: "InitialDataForm",
  setup() {
    const formData = reactive({
      name: "",
    });
    const rules = {
      name: { required },
    };
    const v$ = useVuelidate(rules, formData);
    return {
      formData,
      v$,
    };
  },
  methods: {
    async submitForm() {
      const result = await this.v$.$validate();
      if (result) {
        alert("validation passed");
      }
    },
  },
});
</script>

现在您应该能够看到翻译后的消息：