如何在VeeValidate v4中使用通用校验器并自定义错误提示信息

方法1：全局配置统一生成消息（推荐） #

修改你的main.js，添加消息生成配置，统一处理字段名映射和规则对应的提示：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'

import { defineRule, configure } from 'vee-validate';
import AllRules from '@vee-validate/rules';

// 注册所有校验规则
Object.keys(AllRules).forEach(rule => {
  defineRule(rule, AllRules[rule]);
});

// 配置自定义错误消息生成逻辑
configure({
  generateMessage: (context) => {
    // 字段名映射：把字段名转换成友好显示名称
    const fieldMap = {
      CompanyName: 'Company name',
      // 后续其他字段都可以在这里添加映射
    };
    const displayField = fieldMap[context.field] || context.field;

    // 根据校验规则返回对应提示
    switch (context.rule.name) {
      case 'required':
        return `${displayField} is required`;
      case 'email':
        return `${displayField} must be a valid email`;
      case 'min':
        return `${displayField} must be at least ${context.rule.params[0]} characters`;
      // 其他规则可以按需添加
      default:
        return `${displayField} is invalid`;
    }
  },
});

createApp(App).use(router).use(i18n).mount('#app')

配置完成后，Vue组件里的schema无需修改，错误提示会自动变为Company name is required。

方法2：在Validation Schema中单独定义消息 #

如果仅需给单个字段自定义提示，可以修改组件中的schema为对象形式，直接指定规则和对应消息：

<template>
<Form @submit="onSubmit" :validation-schema="schema" v-slot="{ errors }">
      <div class="form-group">
        <span class="lblSectionField">Company Name <span class="lblMandatory">*</span></span>
        <Field name="CompanyName" class="form-control"/>
        <span class="errorMsg">{{ errors.CompanyName }}</span>
      </div>
</Form>
</template>
<script setup>
  import { Form, Field } from 'vee-validate';
  const schema = {
    CompanyName: {
      required: 'Company name is required',
      // 若需多规则校验，比如最小长度：
      // min: {
      //   value: 3,
      //   message: 'Company name must be at least 3 characters'
      // }
    },
  };
</script>

方法3：结合Vue-I18n实现多语言提示（适配你的现有配置） #

你已经引入了i18n，可以把提示消息放到语言文件中，适配多语言场景：

1. 在i18n语言文件（比如src/locales/en.json）中添加校验相关配置：

{
  "validation": {
    "required": "{field} is required",
    "invalid": "{field} is invalid",
    "min": "{field} must be at least {length} characters",
    "fieldNames": {
      "CompanyName": "Company name"
    }
  }
}

2. 修改main.js中的Vee-Validate配置，使用i18n生成消息：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import i18n from './i18n'

import { defineRule, configure } from 'vee-validate';
import AllRules from '@vee-validate/rules';

Object.keys(AllRules).forEach(rule => {
  defineRule(rule, AllRules[rule]);
});

configure({
  generateMessage: (context) => {
    // 获取友好字段名
    const fieldName = i18n.global.t(`validation.fieldNames.${context.field}`) || context.field;
    // 根据规则获取对应提示，传递字段名和规则参数
    return i18n.global.t(`validation.${context.rule.name}`, {
      field: fieldName,
      ...context.rule.params
    });
  },
});

createApp(App).use(router).use(i18n).mount('#app')

切换语言时，错误提示会自动同步，字段名也会显示为友好名称。

内容的提问来源于stack exchange，提问作者ka hei tong