Vue Element Form组件v-for循环里的表单验证

Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。

正常情况下的表单验证写法

<template>
  <div class="user-detail-body">
    <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="150px" :rules="rules">
      <el-form-item label="员工姓名" prop="empName">
        <el-input clearable v-model="ruleForm.empName" size="small" placeholder="请输入" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="所属组织部门" prop="deptName">
        <el-input v-model="ruleForm.deptName" size="small" placeholder="请选择">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="openDepartmentSelect"></I>
        </el-input>
      </el-form-item>
      <el-form-item label="员工手机号码" prop="mobileNo">
        <el-input clearable v-model="ruleForm.mobileNo" size="small" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="证件类型" prop="certificateType">
        <el-select placeholder="请选择" size="small" filterable prop="certificateType" v-model="ruleForm.certificateType">
          <el-option label="身份证" :value="1"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="性别" prop="gender">
        <el-radio-group v-model="ruleForm.gender">
          <el-radio :label="1">男</el-radio>
          <el-radio :label="2">女</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="入职日期" prop="entryDate">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.entryDate" size="small" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-form>
  </div>
</template>

data() {
  return {
    ruleForm: {
      empName: '', //员工姓名
      deptName: '', //部门名
      mobileNo: '', //手机号码
      certificateType: '', //证件类型
      gender: '', //性别
      entryDate: '', //入职时间
    },
    rules: {
      empName: [
        {required: true, message: '请输入员工姓名', trigger: 'blur'},
      ],
      mobileNo: [
        {required: true, message: '请输入11位手机号', trigger: 'blur'},
        {max: 11, message: '请输入11位手机号'},
        {
          validator(rule, value, callback) {
            (/^[1][0-9]{10}$/g).test(value) ? callback() : callback(new Error("请输入正确手机号"))
          },
          trigger: 'blur'
        }
      ],
      gender: [
        {required: true, message: '请输入选择性别', trigger: 'change'},
      ]
    }
  };
},

但是，有可能我们的需求是这样的，如图：

image.jpg

商城和系统管理是从后台接口返回的，随着开通业务的增多，业务模块还会返回更多。那么如果表单项里有通过 v-for 动态生成的表单项，该如何验证呢？

先附上循环表单项没有加验证之前的代码：

<div>已开通的业务：</div>
<div v-for="(item, index) in ruleForm.businessList" :key="item.serviceId">
  <el-row>
    <el-col :span="5">
      <span class="opening-app">{{item.serviceName}}</span>
    </el-col>
    <el-col :span="19">
      <el-form-item label="渠道商户号" label-width="100px">
        <el-input v-model="item.userMercCode" clearable size="small" placeholder="请输入渠道商户号"></el-input>
      </el-form-item>
    </el-col>
  </el-row>
</div>

首先是添加rules规则，这个和正常添加规则一样

data() {
  return {
    ruleForm: {
      businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
    },
    rules: {
      userMercCode: [
        {required: true, message: '请输入渠道商户号', trigger: 'blur'},
      ]
    }
  };
}

然后给表单项添加验证

<el-form-item label="渠道商户号" :prop="'businessList.'+index+'.userMercCode'" :rules="rules.userMercCode" label-width="100px">
  <el-input v-model="item.userMercCode" clearable size="small" placeholder="请输入渠道商户号"></el-input>
</el-form-item>

注意事项

:rules
原来的写法是直接在外层 <el-form :rules="rules"> 标签上设置一个总的 :rules 就可以了，现在是不仅需要设置总的 :rules ，还需要给 v-for 循环里的标签单独设置 :rules ，<el-form-item :rules="rules.userMercCode">。注意要用 rules.userMercCode。
:prop
另外主要就是 :prop 了，注意正常验证表单项是 prop，而这里是 :prop。
:prop="'businessList.'+index+'.userMercCode'" 是拼接的形式，前面是 v-for 绑定的数组，中间是数组索引 index，最后是表单项绑定的 v-model 的名称，然后用点 . 把它们连接起来。这三项都必须保证正确，错一个都无法验证。
ruleForm
最后就是要注意，v-for 绑定的数组也必须绑定在 form 对象里，注意上面的 data 里：

ruleForm: {
  businessList: [{"serviceId":null, "serviceName":"", "userMercCode":""}]
},