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,一般从后端返回的结果集中获取
在这里插入图片描述2、index =遍历数据的下标,定义不同的prop
3、score=实际数据的key
在这里插入图片描述

  • 3
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值