Vue.js中如何为props的对象属性编写自定义校验器校验各字段

架构老林

2026-10-7

实现方案

你直接在Car属性的props配置项中添加validator函数即可，该函数的入参就是传入的Car对象，你可以在函数内逐个校验对象属性是否符合规则，返回true代表校验通过，返回falseVue会在开发环境抛出对应警告。

完整修改后的组件代码

import { defineComponent } from 'vue'
export default defineComponent({
  name: 'CarComponent',
  data() {
    return {}
  },
  props:{
    Car: {
       type: Object,
       required: true,
       default: () => ({ 
         id: '',
         name:'',
         color:'',
         tireSize:'',
         numberOfSits:'', 
         status: '', 
         engineType: '' 
       }),
       // 自定义校验逻辑
       validator: (val) => {
         // 1. 校验color属性
         if (!['white', 'black'].includes(val.color)) {
           console.warn('Car属性校验失败：color仅允许取值为white/black')
           return false
         }
         // 2. 校验name属性类型
         if (typeof val.name !== 'string') {
           console.warn('Car属性校验失败：name必须为String类型')
           return false
         }
         // 3. 校验numberOfSits取值范围
         const sitNum = Number(val.numberOfSits)
         if (isNaN(sitNum) || sitNum < 2 || sitNum > 4) {
           console.warn('Car属性校验失败：numberOfSits取值范围必须在2-4之间')
           return false
         }
         // 4. 校验status属性
         if (!['Available', 'not Available'].includes(val.status)) {
           console.warn('Car属性校验失败：status仅允许取值为Available/not Available')
           return false
         }
         // 所有校验规则通过
         return true
       }
     }
  }
});