element-ui 动态表单验证

element-ui 表单校验无效果的原因

1. el-form model 未绑定值。
2. el-form mode 绑定的值未在 data 中声明。
3. el-form-item 上指定的 prop 的值错误。
4. el-form-item 上指定的 prop 和 el-form 上绑定的 rules 值的属性不一致。

el-form-item 上的 prop 值的说明

el-form-item 上的 prop 可以理解为是 el-form v-model 绑定的表单对象的属性值得路径

...
data(){
  return {
    // 需要验证的表单对象
    formData: { 
      name:'',  // name 对应的 prop => name
      age:'',  // age 对应的 prop => age
      school:{ schName:'' }, // schName 对应的 prop => school.schName
      subjects: [{ subName:'' }] // subName 对应的 prop => school.0.subName
     }
  }
}
...

el-form 表单中数组的校验

当我们需要对表单中的属性是数组类型的字段进行校验时,我们需要知道当前需要校验项的位置，我们可以根据 prop的值定位。所有需要实现的自定义的校验方法

...
<el-form :model="formData" rules="formDataRules" >
   <template v-for="(item,index) in formData.subjects">
      <el-form-item :rules="formDataRules.dynamicProp" :prop="`subjects.${index}.subName`">
        <el-input v-model="item.subName"></el-input>
      </el-form-item>
   </template>
</el-form>
...
data(){
  const dynamicProp = (rule, value, callback) => {
    const fields = rule.field.split('.'); // fields => [subjects,index,subName]
    // 验证逻辑
    return callback();
  };
  return {
    formDataRules:{
      dynamicProp:[
        { validator: dynamicProp, trigger: 'blur' }
      ]
    } 
  }
}
...