element-ui复杂表单对象数据表单验证

先看一张图，这是一个新增/编辑客户页面，截取了一部分。🚗车辆信息允许添加多个，字段标红✳星号的字段为必填项，如果有输入车架号，则验证车架号由字母数字组成，长度是17位数。

使用vue+element-ui开发，vue模板如下：

对应数据模型如下：

export const carInfo = {
  modelId: '',
  vinNo: '',
  buyDate: '',
  lastMaintenanceDate: '',
  expiryTime: ''
}

export const ruleForm = {
  name: '',
  gender: 3,  //未知
  phone: '',
  email: '',
  employeeId: '',
  tagIds: [],
  carInfoList: [carInfo]
}

按照我们常规的干法，要验证某个字段，则在el-form-item组件加上prop属性，值为需要验证的字段即可。车架号的字段是vinNo，验证车架号，自然而然的写下了如下代码

<el-form-item label="车架号" prop="vinNo">
            <el-input placeholder="请输入"
              v-model.trim="item.vinNo"
               maxlength="17"
              class="custom-form-input"
            />
          </el-form-item>

然鹅，这样写，正则校验validator跟本不会进入。。。

接着，翻看element-ui组件，会发现form-item组件也支持rules属性，那么针对这种复杂数据类型是不是要把rules绑定在form-item组件呢？

继续尝试

<el-form-item label="车架号" prop="vinNo" :rules="rules.vinNo">
            <el-input placeholder="请输入"
              v-model.trim="item.vinNo"
               maxlength="17"
              class="custom-form-input"
            />
          </el-form-item>

此时，验证器validator的函数能进入了，不过，打印value，结果却是undefined。。。

为什么会这样？因为rule是跟prop绑定的，prop绑定不正确，那么验证器就无法获取到字段值。vinNo字段并不是ruleForm的直接属性，carInfoList才是ruleFrom的的最近属性，而vinNo是carInfoList对象数组的属性。

所以，prop的正确绑定方式是如下（看图2第88行代码）：

<el-form-item label="车架号" :prop="`carInfoList[${index}].vinNo`" :rules="rules.vinNo">
            <el-input placeholder="请输入"
              v-model.trim="item.vinNo"
               maxlength="17"
              class="custom-form-input"
            />
          </el-form-item>

这样element-ui复杂表单对象数据表单验证就成功了🎇🎇🎇。