element-ui for循环生成表单时，表单校验问题-Toy模板网

这篇具有很好参考价值的文章主要介绍了element-ui for循环生成表单时，表单校验问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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>

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>

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

please transfer a valid prop path to form item!

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

字段说明：
1、appraisalTempContent=遍历数组的key，一般从后端返回的结果集中获取
elementui多层循环动态表单校验,ui,前端,javascript 2、index =遍历数据的下标，定义不同的prop
3、score=实际数据的key
文章来源地址https://www.toymoban.com/news/detail-592650.html