vue + element-ui 对复杂对象型数组进行表单验证

标题 项目开发中vue + element-ui 对复杂对象型数组进行表单验证

1. 需求场景
   在最近的项目开发中，里面有个模块是关于采购系统的，采购避免不了做采购的台账信息表单，而采购的信息复杂且是动态添加的，所以也需要最复杂对象数组遍历循环添加验证。先添加一个图片1-1，这个验证的效果图。
   
   这里对一些可能的小疑问做一下简要回答啊。疑惑1：比如为什么规格不做校验，因为规则和食材数组是绑定的，这在之前的的基础数据里已经做了。所以校验食材的有无也就校验了规格数据的有无。疑惑2：为什么食材和规则都是禁止输入的，因为防止客户填错信息，这也是项目要求的，因为不同的人填一个白菜会N种可能性，比如A叫小白菜，B叫大白菜，C叫白菜…诸如此类的，那不利于后面的数据归纳。所以在输入框旁边添加一个选择按钮，打开食材页面，用于选择食材数据。如朋友你有其他疑惑的也可以私我。

2. 需要验证的复杂数据对象
   现在让我们走进这个上述表单的数据的实况，如下所示：

        dailyUseRecordForm:新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                }
            ]
        },

	定义的表单数据类型如上所示，需要说明一下，初始的时候食材数据数组（dailyUseRecordForm.details）只有一条空数据，点击小“+”号按钮，或者下面的批量添加按钮都能往里面添加新的对象数据，下面是点击加号往里面添加一条数据后的样子：

        dailyUseRecordForm:新增、修改日消耗品登记信息中的选项信息
        {   date:'',//新增和修改日消耗品的登记日期
            gysName:'',//新增和修改日消耗品的供应商信息
            gysId:'',//新增和修改台账信息供应商id
            details:[
                { 
                      foodName:'',//新增和修改日消耗品的名称
                      spec:'',//新增和修改日消耗品的规格
                      num:'',//新增和修改日消耗品的数量
                      price:'',//新增和修改日消耗品的单价
                      foodId:'',//新增和修改台账信息食物id
                      id:''//该对象的id
                },
                { 
                      foodName:'',
                      spec:'',
                      num:'',
                      price:'',
                      foodId:'',
                      id:''
                }
            ]
        },

3. 进入表单验证的前端页面部分
   （1）定义表单验证规则：

dailyUseRecordRules:{//台账信息表单验证规则
            gysName:[
                { required: true, message: '请输入供应商名称', trigger: 'blur' },
                 { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' },

            ],
            date: [
                { required: true, message: '请选择日期', trigger: 'blur' },
                // { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
            ],
            foodName:[//食材名称
                { required: true, message: '请选择食材', trigger: 'blur' },
                { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'change' },
            ],
            num:[
                { required: true, message: '请输入数量', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*$)/,
                    message: '数量格式有误',
                    trigger: 'blur'
                }
            ],
            price:[
                { required: true, message: '请输入价格', trigger: 'blur' },
                {
                    required: false,
                    pattern: /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/,
                    message: '价格格式有误',
                    trigger: 'blur'
                }
            ]
  }

以上是待会需要用到的表单验证规则，在data数组里定义。
（2）进行表单验证
因为今天的主题是复杂对象遍历的验证，所以我们只分析怎样验证复杂数据结构的数据，也就是上面的‘dailyUseRecordForm.details’中的对象数组。如何遍历该数组，来给每个元素添加验证。

<div v-for="(item,index) in dailyUseRecordForm.details :key="index">
    <el-form-item label="name" :prop="`details[${index}].foodName`" :rules="dailyUseRecordRules.foodName">
       <el-input   v-model="item.foodName"></el-input>
   </el-form-item>
   <el-form-item label="name" :prop="`details[${index}].num`" :rules="dailyUseRecordRules.num">
       <el-input   v-model="item.num"></el-input>
   </el-form-item>
  <el-form-item label="name" :prop="`details[${index}].price`" :rules="dailyUseRecordRules.price">
       <el-input   v-model="item.price"></el-input>
   </el-form-item>
</div>

		以上的几行代码便是解决表单验证的核心所在，因为自己的页面中有按钮，占位符等不利于观察的因素，所以先给出一个思路。下面是自己实际中的情况，其实这个没有看到必要，只是为了增加一点实际的项目代入感，我还是粘上，想看的人看，不想看的人忽略。

<el-form-item   v-for='(item,index) in dailyUseRecordForm.details' :label=" '食材'+(index+1) "  :key="index">
                <el-form-item label='名称' :prop="`details[${index}].foodName`" :rules='dailyUseRecordRules.foodName'>
                <el-input v-model="item.foodName" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.name :disabled="true">	 </el-input>
                <el-button  icon="el-icon-search" @click='searchDialogOpen(index)'></el-button>
              </el-form-item>
              <el-form-item label='规格'>
                <el-input   v-model="item.spec  :placeholder=dailyUseRecordMessage.spec  :disabled="true"></el-input >
              </el-form-item>
              <el-form-item label='数量' :prop="`details[${index}].num`" :rules='dailyUseRecordRules.num'>
                <el-input v-model="item.num" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.num clearable></el-input>
              </el-form-item>
              <el-form-item label='单价' :prop="`details[${index}].price`" :rules='dailyUseRecordRules.price'>
                <el-input v-model="item.price" autocomplete="off" style="width:130px;" :placeholder=dailyUseRecordMessage.price clearable></el-input>
                <span>元</span><span  v-show="item.spec === '' ? false : true" >/{{item.spec}}</span>
              </el-form-item> 
              <el-form-item style="display:inline-block;">
                <el-button icon='el-icon-delete' @click="delFoodDetail(index)"></el-button>
              </el-form-item> 
              <el-form-item style="display:inline-block;" v-if="index === Number(dailyUseRecordForm.details.length)-1">
                <el-button icon='el-icon-plus' @click="addFoodDetail"></el-button>
              </el-form-item>
  </el-form-item> 

4. 小结部分
   官网上给出的动态表单验证是针对数组中的对象只有一个属性需要验证的情况，如果你需要遍历的数据中的对象有多个属性需要验证，则需要像我上述一样做修改。有疑问的朋友可以私我，咱们共同探讨。