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

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

图1 表单页面

使用vue+element-ui开发,vue模板如下:

图2 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组件呢?

图3 element-ui 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复杂表单对象数据表单验证就成功了🎇🎇🎇。

发表回复

您的电子邮箱地址不会被公开。