Vue表单自定义validator函数需接收rule、value、callback三参数，同步校验直接调用callback()或callback(new Error())，异步校验推荐返回Promise并throw错误，须确保callback仅调用一次且不混用两种方式。
Vue 表单校验中编写自定义 validator 函数，核心是让校验逻辑返回 Promise 或直接返回布尔值（或错误信息对象），配合 Element Plus、Ant Design Vue 等 UI 库的 rules 配置使用。关键在于理解校验函数的参数结构和异步处理方式。
自定义 validator 函数的基本结构
一个标准的自定义 validator 函数接收三个参数：rule（当前规则对象）、value（待校验的字段值）、callback（校验结束后的回调）。它必须调用 callback 来通知校验结果：
- 校验通过：调用
callback()（无参） - 校验失败：调用
callback(new Error('错误提示')) - 支持异步：在 Promise 中 resolve 或 reject 后再调用
callback
同步校验示例：手机号格式验证
适用于简单正则、长度、必填等即时判断场景：
const phoneRule = {
validator: (rule, value, callback) => {
if (!value) {
callback(new Error('手机号不能为空'));
} else if (!/^1[3-9]\d{9}$/.test(value)) {
callback(new Error('请输入正确的手机号'));
} else {
callback(); // 通过
}
},
trigger: 'blur'
};
异步校验示例：用户名是否已存在
需发起请求时，必须返回 Promise（UI 库如 Element Plus 会自动处理 Promise 返回值），或手动在回调中处理：
vue-composition-api-best-practices
下载
Vue 3 组合式 API 与 最佳实践，涵盖代码组织、useXxx 模式、组合式函数设计、Store 集成、响应式优化及功能抽取。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法（返回 Promise）：
const usernameRule = {
validator: async (rule, value) => {
if (!value) return;
const res = await checkUsernameExists(value); // 假设这是个 API 调用
if (res.data.exists) {
throw new Error('用户名已被占用');
}
},
trigger: 'blur'
};
- 兼容老写法（使用 callback）：
validator: (rule, value, callback) => {
if (!value) return callback();
checkUsernameExists(value).then(res => {
if (res.data.exists) {
callback(new Error('用户名已被占用'));
} else {
callback();
}
});
}
复用与封装自定义校验函数
把通用逻辑抽成独立函数，提升可维护性：
// 封装手机号校验器
const validatePhone = (message = '请输入正确的手机号') => ({
validator: (rule, value, callback) => {
if (!value || /^1[3-9]\d{9}$/.test(value)) {
callback();
} else {
callback(new Error(message));
}
}
});
// 在 rules 中使用
rules: {
phone: [validatePhone(), { required: true, message: '请填写手机号' }]
}
不复杂但容易忽略的是：务必确保 callback 被且仅被调用一次；异步校验不要混用 callback 和 return Promise；trigger 要按需设置为 'change'、'blur' 或数组形式。
