如何使自定义验证器在 Vuejs 的 *props* 中 * 检查对象的每个属性 *答案

【问题标题】：How to make Custom Validator to *check each attribute* of an object in *props* in Vuejs如何使自定义验证器在 Vuejs 的 *props* 中 * 检查对象的每个属性 *
【发布时间】：2021-10-24 07:36:57
【问题描述】：

我有一个名为car 的道具对象，我想验证car 的每个属性。
例如，规则是：

color 只能是 white 或 black
name 只能是String
numberOfSits 4 到 2 之间
status 必须是 Available 或 not Available

我知道我需要 car 类似 validator (val) =>{} 的 Validator 函数，但 我不知道应该如何实现它。
我也知道如何检查 String type 属性，例如，如果我有一个 Status 变量，validator 就像：

      
    props:{
        Status:{
           type: String,
           default: 'Available',
           validator: function (value : string) {
            return ['Available', 'Not Available'].includes(value);
         }
    }

这是关于我的问题的代码：

   

     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 must be here
                }
             }

我搜索了很多，但没有找到我想要的，而且我不想想使用任何库

【问题讨论】：

我不知道里面应该写什么 - 这是关键问题。我们也不知道。汽车需要验证吗？汽车的规则是什么？
@Ohgodwhy 你是什么意思“规则”？这只是一个例子，我只是想把我说的那 4 个项目放在 Validator 中，你可以想到一个带有name、color 等的水果

标签： vue.js validation vuejs3 vue-props

【解决方案1】：

答案是如此明显，以至于我很想知道为什么您看不到它-答案只是从问题中得出：

import { defineComponent } from 'vue';

export default defineComponent({
            name: 'CarComponent',
            data() 
            {
                return {                    
                };
            },
            props:
            {
                Car: 
                {
                    type: Object,
                    required: true,
                    default: () => ({ 
                      id: '',
                      name: '',
                      color: 'white',
                      tireSize: '',
                      numberOfSits: 2, 
                      status: 'Available', 
                      engineType: '' 
                    }),
                    validator: (value) => {
                      return typeof value.name === 'string' &&
                        ['white', 'black'].includes(value.color) &&
                        ['Available', 'not Available'].includes(value.status) &&
                        value.numberOfSits >= 2 && value.numberOfSits <= 4
                    }
                }
             }

【讨论】：

成功了，谢谢先生。它看起来很简单，我真的不知道为什么我自己没有弄清楚。