Vee-validate v3中结合自定义消息实现服务端验证

问题核心 #

1. 你在扩展验证规则时手动指定了message属性，覆盖了configure中的defaultMessage配置，导致全局默认消息逻辑失效。
2. 需要将服务器返回的validation.required格式错误码，映射到自定义lang.js中的对应消息，同时让Vee-Validate优先使用Vue-i18n的翻译逻辑。

修复步骤 #

1. 移除规则扩展中的硬编码消息 #

修改validator.js的规则扩展部分，删除自定义的message配置，让规则使用全局默认消息逻辑：

// Add rules
extend('required', {
  ...required
  // 移除这里的message硬编码
})

extend('email', {
  ...email
  // 移除这里的message硬编码
})

2. 修正defaultMessage的i18n路径 #

根据你console.log(messages)输出的{ en: { validation: (...) }}结构，调整defaultMessage的i18n路径，确保能正确匹配到lang文件中的消息：

export default ({ app }) => {
  configure({
    defaultMessage: (_, values) => {
      // 直接匹配lang.js里validation下的规则名
      return app.i18n.t(`validation.${values._rule_}`, values);
    }
  });
}

3. 处理服务器返回的错误码 #

当服务器返回validation.required这类错误时，在请求失败回调中直接用Vue-i18n翻译错误码，再传给setErrors：

// 假设服务器返回格式：{ errors: { email: 'validation.required', username: 'validation.unique' } }
const serverErrors = response.data.errors;
const translatedErrors = {};

Object.keys(serverErrors).forEach(field => {
  translatedErrors[field] = this.$i18n.t(serverErrors[field]);
});

// 通过ValidationObserver的ref设置错误
this.$refs.formObserver.setErrors(translatedErrors);

4. 确保lang.js的消息结构正确 #

你的lang.js需要保持对应层级的结构，示例如下：

// utils/lang.js
export default {
  en: {
    validation: {
      required: '{_field_} is required',
      email: 'Please fill in a valid email address',
      unique: '{_field_} has already been taken'
    }
  }
}

验证效果 #

1. 表单本地验证时，Vee-Validate会自动通过Vue-i18n加载对应规则的自定义消息。
2. 服务器返回的错误码会被翻译成预设消息，正确显示在对应表单字段下方。

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