Vuelidate结合i18n报错：本地化消息键未找到，需自定义验证提示

错误原因分析 #

1. 语言标识不匹配：你设置的locale是cz，但messages里定义的捷克语键是cs，导致i18n无法匹配对应语言包，进而触发默认的en-US fallback查找，而你的messages中只有en，最终出现键找不到的报错。
2. 翻译方法绑定错误：在createI18nMessage中你重新创建了一个新的VueI18n实例来获取t方法，而非使用已经配置好的i18n实例，导致无法读取你自定义的翻译消息。

修正后的代码 #

// 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é',
    }
  },
}

// 修正locale为'cs'，与messages中的语言键匹配
const i18n = VueI18n.createI18n({
  locale: 'cs',
  fallbackLocale: 'en',
  messages
})

// 使用已配置好的i18n实例的全局t方法
const withI18nMessage = VuelidateValidators.createI18nMessage({ 
  t: i18n.global.t.bind(i18n.global)
})

export const required = withI18nMessage(VuelidateValidators.required)

配套使用提示 #

• 确保在Vue主入口挂载i18n实例，让验证器能获取语言环境：

  import { createApp } from 'vue'
  import App from './App.vue'
  import { i18n } from './i18n-validators.js'
  
  const app = createApp(App)
  app.use(i18n)
  app.mount('#app')
  

• 在组件中使用验证器时，需指定$property替换消息中的占位符：

  <template>
    <input v-model="form.username" />
    <span v-if="v$.username.required.$error">{{ v$.username.required.$message }}</span>
  </template>
  
  <script setup>
  import { useVuelidate } from '@vuelidate/core'
  import { required } from './i18n-validators.js'
  
  const form = { username: '' }
  const rules = {
    username: { required: required({ $property: 'Username' }) }
  }
  const v$ = useVuelidate(rules, form)
  </script>
  

内容的提问来源于stack exchange，提问作者man_luke