使用vee-validate多语言时字段名称显示undefined的问题

问题 #

使用vee-validate多语言功能时，字段验证提示无法识别字段名称：

• 必填项提示：The undefined field is required
• 邮箱格式无效提示：The undefined field must be a valid email
  验证功能正常，但字段名始终显示undefined。

字段代码：

<Field name="email" v-slot="{ field, errors }" v-model="form.email" rules="required|email">
  <v-text-field 
    id="login-input-email" 
    class="input-field placeholder-center font-italic" 
    variant="plain" 
    :placeholder="$t('login.input.email.placeholder')" 
    v-bind="field" 
    :error-messages="errors" 
  >
  </v-text-field>
</Field>

vee-validate配置代码：

import { localize, setLocale } from '@vee-validate/i18n';

import en from '@vee-validate/i18n/dist/locale/en.json';
import de from '@vee-validate/i18n/dist/locale/de.json';

import localesEN from '~/locales/en';
import localesDE from '~/locales/de';

export default defineNuxtPlugin(nuxtApp => {
  configure({
    generateMessage: localize({
      en: Object.assign(en, localesEN.validation),
      de: Object.assign(de, localesDE.validation)
    })
  });
  // ...其他配置
});

曾尝试在en配置中添加names: {email: 'Email'}但无效果，求解决方法。

解决方法 #

方法1：修正全局配置的字段名称映射结构 #

之前的Object.assign可能破坏了vee-validate语言配置的原有结构，需要将names正确合并到对应语言的配置对象中：

export default defineNuxtPlugin(nuxtApp => {
  configure({
    generateMessage: localize({
      en: {
        // 合并内置英文消息和自定义验证消息
        messages: {
          ...en.messages,
          ...localesEN.validation.messages
        },
        // 配置字段名称映射
        names: {
          email: 'Email'
        }
      },
      de: {
        messages: {
          ...de.messages,
          ...localesDE.validation.messages
        },
        names: {
          email: 'E-Mail'
        }
      }
    })
  });
  // ...其他配置
});

如果你的localesEN.validation中已经包含names字段，直接合并即可：

en: {
  ...en,
  ...localesEN.validation,
  names: {
    ...(localesEN.validation.names || {}),
    email: 'Email'
  }
}

方法2：在Field组件上直接指定label（简单直接） #

不需要全局配置，直接在Field组件上添加label属性，vee-validate会自动将其用作字段名称：

<Field 
  name="email" 
  label="Email" 
  v-slot="{ field, errors }" 
  v-model="form.email" 
  rules="required|email"
>
  <v-text-field 
    id="login-input-email" 
    class="input-field placeholder-center font-italic" 
    variant="plain" 
    :placeholder="$t('login.input.email.placeholder')" 
    v-bind="field" 
    :error-messages="errors" 
  >
  </v-text-field>
</Field>

如果需要多语言支持，可绑定i18n翻译函数：

<Field 
  name="email" 
  :label="$t('login.input.email.label')" 
  v-slot="{ field, errors }" 
  v-model="form.email" 
  rules="required|email"
>
  <!-- 输入框内容 -->
</Field>

方法3：在验证规则中显式指定字段名 #

对内置规则包装时，可在消息中直接指定字段名（适合自定义规则场景）：

import { defineRule } from 'vee-validate';
import { required, email } from '@vee-validate/rules';

defineRule('required', (value, args, ctx) => {
  if (!value) {
    return `The ${ctx.field} field is required`;
    // 多语言场景：return ctx.$t('validation.required', { field: ctx.field });
  }
  return true;
});

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