validator是Vue中用于对props进行业务规则校验的同步函数，需返回布尔值；它补充type检查，支持邮箱、手机号、对象结构、枚举等非基础类型校验，开发环境生效，生产环境禁用。
Vue 中的 Props 校验进阶，核心在于使用 validator 函数对自定义格式（比如邮箱、手机号、特定结构的对象、枚举子集等）做**非基础类型**的严格校验。它不替代 type，而是补充——type 检查 JS 基础类型是否合法，validator 负责检查值是否符合业务规则。
validator 是什么？怎么写？
validator 是一个接收 prop 值作为唯一参数的函数，必须返回布尔值：
✅ 返回 true：校验通过；
❌ 返回 false：触发 Vue 警告（开发环境），并标记该 prop 为无效。
它写在 prop 定义对象里，和 type、required 并列：
props: {
email: {
type: String,
required: true,
validator: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
}
}
校验复杂结构：对象/数组的内部字段
当 prop 是对象或数组时，validator 可深入校验其内容是否满足业务契约，比如要求用户对象必须含 id（数字）、name（非空字符串）、role（仅限 'admin' | 'user'）：
userInfo: {
type: Object,
required: true,
validator: (obj) => {
return (
typeof obj === 'object' &&
obj !== null &&
typeof obj.id === 'number' &&
Number.isInteger(obj.id) &&
typeof obj.name === 'string' &&
obj.name.trim().length > 0 &&
['admin', 'user'].includes(obj.role)
)
}
}
结合外部校验库或复用逻辑
避免重复造轮子，可把通用校验逻辑抽成函数，或接入 validator.js、isemail 等轻量库：
- 安装
npm install isemail - 在组件中导入并使用：
import isEmail from 'isemail'
// ...
email: {
type: String,
validator: (val) => isEmail.validate(val, { allowUnicode: false })
}
也可封装校验工具函数供多个组件复用：
// utils/validators.js
export const isValidPhone = (str) => /^1[3-9]\d{9}$/.test(str)
export const isInEnum = (val, enumList) => enumList.includes(val)
// 组件中
status: {
type: String,
validator: (v) => isInEnum(v, ['draft', 'published', 'archived'])
}
注意边界与调试技巧
validator 在开发环境生效，生产环境默认不执行（提升性能），所以务必在 dev 阶段覆盖足够用例。
常见易忽略点：
- 先做
type判断再深入校验（如typeof val === 'string'），防止null或undefined导致报错 - 对可能为空的字符串用
val?.trim()避免空格干扰 - 异步校验（如调接口验重）不适用
validator—— 它必须同步返回结果，这类应交由表单逻辑或 watch 处理
校验失败时，Vue 控制台会输出明确警告，包含组件名、prop 名和当前值，便于快速定位问题。
