Props 校验进阶怎么使用 validator 函数对 Props 传入的自定义格式进行严格校验-Vue.js-PHP中文网

validator是vue中用于对props进行业务规则校验的同步函数，需返回布尔值；它补充type检查，支持邮箱、手机号、对象结构、枚举等非基础类型校验，开发环境生效，生产环境禁用。

props 校验进阶怎么使用 validator 函数对 props 传入的自定义格式进行严格校验

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'）：

Vuejs

Vue.js 官方推荐通过 npm 进行安装，这是构建现代化前端项目最主流的方式。在终端中执行 npm install vue 即可获取最新稳定版，如需指定版本可添加 @版本号，例如 npm install vue@3.4.0。安装前请确保已配置 Node.js 环境（推荐 v18 及以上版本），并建议将 npm 镜像源切换至国内镜像以提升下载速度。对于大型项目，还可通过 npm create v

下载

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'])
}