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

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

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

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 动态生成的表单项，该如何验证呢？

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

已开通的业务：

  
    
      {{item.serviceName}}
    
    
      
        
      
    
  

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

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

然后给表单项添加验证

注意事项

• :rules
  原来的写法是直接在外层 标签上设置一个总的 :rules 就可以了 ，现在是不仅需要设置总的 :rules ，还需要给 v-for 循环里的标签单独设置 :rules ，。注意要用 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":""}]
},