Vue3组合式API中如何用Vuelidate自定义邮箱校验规则及错误信息？

核心错误点 #

1. 校验状态判断逻辑完全颠倒 #

你的messageType和validationMessage两个计算属性的判断条件写反了：

• 当字段校验不通过（$error为true）时，才需要显示警告样式和错误消息，但你用了!v$.value.emailAddress.$error作为判断条件，导致正确输入时反而显示错误消息，错误输入时不显示，这就是内置邮箱校验后正确邮箱消息仍不消失的核心原因。

2. 自定义正则校验器使用方式错误 #

直接将正则表达式emailPattern替换内置email校验器是无效的，Vuelidate要求校验器必须是符合其规范的校验函数。直接传入正则无法被识别执行，导致格式错误时校验不触发，进而能正常提交。

3. 初始校验未触发（可选但影响体验） #

Vuelidate默认是懒校验模式，只有字段被修改或手动调用$validate()后才会执行校验。你在初始状态下打印$error返回false，是因为此时还未执行任何校验操作。

修正后的代码示例 #

1. 正确使用自定义正则校验器 #

import { useVuelidate } from '@vuelidate/core';
import { required, helpers } from '@vuelidate/validators';

// 自定义邮箱正则
const emailPattern = /^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i;

const formData = reactive({
  data: {
    emailAddress: '',
  },
});

// 正确配置校验规则：用helpers.regex包装自定义正则，同时给required添加错误消息
const rules = {
  emailAddress: {
    required: helpers.withMessage('Email cannot be empty', required),
    customEmail: helpers.withMessage('Please enter a valid email address', helpers.regex('customEmail', emailPattern))
  },
};

// 开启自动脏值检测，初始状态即可触发校验（可选）
const v$ = useVuelidate(rules, formData.data, { $autoDirty: true });

2. 修正校验状态判断逻辑 #

// 校验不通过时显示警告样式
const messageType = computed(() => v$.value.emailAddress.$error ? 'warning' : '');

// 校验不通过时显示对应的错误消息（优先显示required的消息）
const validationMessage = computed(() => {
  if (!v$.value.emailAddress.$error) return '';
  return v$.value.emailAddress.required?.$message || v$.value.emailAddress.customEmail?.$message;
});

3. 优化提交函数（确保校验完成后再判断） #

Vuelidate的$validate()返回Promise，建议用async/await确保校验完成后再执行后续逻辑：

const submit = async () => {
  await v$.value.$validate();
  if (v$.value.$invalid) return;
  window.scrollTo(0, 0);
};

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