使用Vee Validate为不同表单自定义校验消息并实现本地化

嘿，这个需求我刚好在项目里实现过，用 VeeValidate 完全能搞定，核心思路就是「全局通用消息+表单级自定义覆盖」，结合它的本地化能力就能完美满足你的场景。下面一步步来：

1. 先配置全局基础本地化消息 #

首先我们先把通用的校验消息配置好，比如中文环境下的必填、邮箱格式错误提示，这样大部分表单可以直接用这些通用消息：

// 比如在你的全局配置文件（如vee-validate.config.js）
import { configure } from 'vee-validate';
import { localize } from '@vee-validate/i18n';

// 定义中文本地化消息
const zhCNMessages = {
  messages: {
    required: '{field}为必填项', // 这就是个人资料页要用的提示
    email: '{field}格式不正确',
  },
};

// 配置VeeValidate使用本地化
configure({
  generateMessage: localize({
    zh_CN: zhCNMessages,
    // 如果你需要英文，也可以加en_US的配置
    // en_US: { ... }
  }),
});

// 可以默认设置当前语言为中文
localize('zh_CN');

2. 给注册表单自定义专属提示 #

注册表单需要特殊的email必填提示，我们只需要在这个表单的组件里，覆盖required规则下email字段的消息即可。这里分两种写法：

方式一：用Composition API（useForm） #

<!-- 注册表单组件 -->
<template>
  <form @submit.prevent="onSubmit">
    <label>邮箱：</label>
    <input v-model="email" type="email" />
    <span class="error">{{ errorMessage }}</span>
    <button type="submit">注册</button>
  </form>
</template>

<script setup>
import { useForm, useField } from 'vee-validate';

// 初始化表单时传入自定义消息
const { handleSubmit } = useForm({
  messages: {
    zh_CN: {
      required: {
        // 只覆盖email字段的required提示
        email: '请填写您的邮箱，我们将发送操作指引至该邮箱',
      },
    },
    // 如果有英文需求，对应en_US也加一条
    // en_US: {
    //   required: {
    //     email: 'Please enter your email, we will send instructions to it',
    //   },
    // }
  },
});

// 绑定email字段和校验规则
const { value: email, errorMessage } = useField('email', 'required|email');

// 提交逻辑
const onSubmit = handleSubmit((values) => {
  console.log('注册提交：', values);
  // 你的注册接口调用逻辑
});
</script>

方式二：用模板组件（<Form>/<Field>） #

如果你习惯用VeeValidate提供的模板组件，也可以直接在<Form>上传入messages属性：

<!-- 注册表单组件 -->
<template>
  <Form :messages="customMessages" @submit="onSubmit">
    <Field name="email" rules="required|email" placeholder="请输入邮箱" />
    <ErrorMessage name="email" class="error" />
    <button type="submit">注册</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';

// 定义该表单的自定义消息
const customMessages = {
  zh_CN: {
    required: {
      email: '请填写您的邮箱，我们将发送操作指引至该邮箱',
    },
  },
};

const onSubmit = (values) => {
  console.log('注册提交：', values);
};
</script>

3. 个人资料表单直接用全局消息 #

个人资料页的邮箱校验不需要特殊提示，直接用我们第一步配置的全局{field}为必填项即可，所以不需要额外覆盖，直接正常使用校验：

<!-- 个人资料表单组件 -->
<template>
  <Form @submit="onSubmit">
    <Field name="email" rules="required|email" placeholder="请输入新邮箱" />
    <ErrorMessage name="email" class="error" />
    <button type="submit">保存修改</button>
  </Form>
</template>

<script setup>
import { Form, Field, ErrorMessage } from 'vee-validate';

const onSubmit = (values) => {
  console.log('修改邮箱提交：', values);
  // 你的更新接口调用逻辑
};
</script>

4. 多语言切换支持 #

如果你的项目需要切换语言，只需要调用localize方法切换即可，自定义的表单消息会自动匹配当前语言：

// 切换到英文
localize('en_US');
// 切换回中文
localize('zh_CN');

这样两个表单的email必填提示就会完全分开，而且完美支持本地化啦！

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