element-ui for循环生成表单时，表单校验问题_elementui多层循环动态表单校验

1、静态生成的表单，校验规则是放在data中处理

<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

  <el-form-item label="密码" prop="pass">
    <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
  </el-form-item>

</el-form>
<script>
  data() {
    rules: {
      pass: [{
        validator: validatePass,
        trigger: 'blur'
      }],
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

2、动态表单页面，需要把规则放在el-form-item中，进行校验

<el-form :model="detail" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">

  <el-form-item v-for="(domain, index) in detail.appraisalTempContent" :label="'域名' + index" :key="index"
    :prop="'appraisalTempContent.' + index + '.score'" :rules="[  { required: true, message: '分值不能为空', trigger: 'blur' },
      { pattern:/^[0-9]+([.]{1}[0-9])?$/, message: '分值为正整数或一位小数', trigger: ['blur', 'change'] }]">
    <el-input v-model="domain.score"></el-input>
    <el-button @click.prevent="removeDomain(domain)">删除</el-button>
  </el-form-item>

</el-form>
<script>
  data() {
    detail: {
      appraisalTempContent: [
        score: ''
      ],
    }
  }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

注意事项：
当使用v-for循环生成表单时，
：prop有格式要求
格式不对会报错

please transfer a valid prop path to form item!
1

:prop=“‘appraisalTempContent.’ + index + ‘.score’”

字段说明：
1、appraisalTempContent=遍历数组的key，一般从后端返回的结果集中获取
2、index =遍历数据的下标，定义不同的prop
3、score=实际数据的key