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

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

需求场景

在最近的项目开发中，里面有个模块是关于采购系统的，采购避免不了做采购的台账信息表单，而采购的信息复杂且是动态添加的，所以也需要最复杂对象数组遍历循环添加验证。先添加一个图片1-1，这个验证的效果图。

这里对一些可能的小疑问做一下简要回答啊。疑惑1：比如为什么规格不做校验，因为规则和食材数组是绑定的，这在之前的的基础数据里已经做了。所以校验食材的有无也就校验了规格数据的有无。疑惑2：为什么食材和规则都是禁止输入的，因为防止客户填错信息，这也是项目要求的，因为不同的人填一个白菜会N种可能性，比如A叫小白菜，B叫大白菜，C叫白菜…诸如此类的，那不利于后面的数据归纳。所以在输入框旁边添加一个选择按钮，打开食材页面，用于选择食材数据。如朋友你有其他疑惑的也可以私我。

需要验证的复杂数据对象

现在让我们走进这个上述表单的数据的实况，如下所示：

dailyUseRecordForm:新增、修改日消耗品登记信息中的选项信息

{ date:'',//新增和修改日消耗品的登记日期

gysName:'',//新增和修改日消耗品的供应商信息

gysId:'',//新增和修改台账信息供应商id

details:[

{

foodName:'',//新增和修改日消耗品的名称

spec:'',//新增和修改日消耗品的规格

nu