element ui 中循环列表的表单怎么校验（v-for动态绑定的数据)

本文链接：https://blog.youkuaiyun.com/m0_46693606/article/details/124473784

本文介绍了在Vue项目中使用Element-UI进行动态数组对象表单验证的方法。通过v-for遍历动态生成的表单项，并结合prop属性和rules属性，实现了对每个数组元素的selectOne和selectOneNumber字段的校验，包括必填和长度限制。示例代码详细展示了如何设置模板和验证规则，为处理复杂表单验证提供了参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在vue项目中，使用element-ui的表单校验能节省很多时间，简单的对象表单校验，很简单，使用prop属性就可以直接校验。但是，如果表单项里有通过v-for动态生成的数组对象，又该怎么设置验证呢？

1、总结：

1) v-for要遍历的数组dynamicItem

  // 字典维护表单
      dictMaintainForm: {
        dynamicItem: [
          {
            typeId: this.$route.query.typeId,
            code:this.$route.query.code,
            selectOne: "",
            selectOneNumber: ""
          }
        ]
      },

2) 表单验证规则

 // 表单验证
      dictMaintainFormRules: {
        selectOne: [
          { required: true, message: "请输入选项值名称", trigger: "blur" },
          { min: 1, max: 20, message: "长度在 1 到 20 个字符", trigger: "blur" }
        ],
        selectOneNumber: [
          { required: true, message: "请输入选项值编号", trigger: "blur" },
          { validator: checkNumber, trigger: "blur" }
        ]
      }

template示例：

    <div v-for="(item, index) in dictMaintainForm.dynamicItem" :key="index">
        <el-form-item
                label-width="140px"
                label="选项值:"
                :prop="'dynamicItem.' + index + '.selectOne'"
                :rules="dictMaintainFormRules.selectOne"
              >
                <el-input
                  v-model="item.selectOne"
                  placeholder="请输入选项值名称"
                ></el-input>
            </el-form-item>
            <el-form-item
                :prop="'dynamicItem.' + index + '.selectOneNumber'"
                :rules="dictMaintainFormRules.selectOneNumber"
              >
                <el-input
                  placeholder="请输入选项值编号"
                  v-model="item.selectOneNumber"
                ></el-input>
              </el-form-item>
</div>