如何使用Nuxt I18n实现Vuetify验证规则消息的翻译

步骤1：添加验证提示的翻译键值 #

在Nuxt I18n的语言文件中配置验证提示的多语言翻译，以中文（locales/zh-CN.json）为例：

{
  "page": {
    "contact": {
      "form": {
        "name": "姓名"
      }
    }
  },
  "validation": {
    "required": "此字段为必填项",
    "cannot_be_blank": "此字段不能为空"
  }
}

英文语言文件（locales/en.json）对应配置：

{
  "page": {
    "contact": {
      "form": {
        "name": "Name"
      }
    }
  },
  "validation": {
    "required": "This field is required",
    "cannot_be_blank": "This field cannot be blank."
  }
}

步骤2：重构验证规则为工厂函数 #

修改validationRules.ts，将硬编码文本替换为接收翻译函数的工厂函数，兼顾规则复用与国际化需求：

// validationRules.ts
export const createRequiredRule = (t: (key: string) => string) => {
  return (value: any): string | boolean => !!value || t('validation.required');
};

export const createBlankValidator = (t: (key: string) => string) => {
  return (value: string | null | undefined): string | boolean => 
    !value || !!value?.trim() || t('validation.cannot_be_blank');
};

步骤3：在组件中生成带翻译的验证规则 #

在表单组件中，通过useI18n获取当前语言环境的翻译函数t，生成对应的验证规则：

<template>
  <v-text-field
    v-model="message.name"
    outlined
    :label="$t('page.contact.form.name')"
    :rules="nameValidationRules"
  ></v-text-field>
</template>

<script setup>
import { ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { createRequiredRule, createBlankValidator } from '@/utils/validationRules';

const { t } = useI18n();
const message = ref({ name: '' });

// 生成适配当前语言的验证规则
const nameValidationRules = ref([
  createRequiredRule(t),
  createBlankValidator(t)
]);
</script>

逻辑说明 #

将验证规则设计为工厂函数后，可在组件层面传入当前语言的翻译函数，让验证提示动态匹配系统语言，同时保留规则的复用性，避免重复编写验证逻辑。

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