ElementUI Form表单里使用 v-for循环创建表单元素校验

在ElementUI中使用v-for循环创建表单元素并进行验证，你需要为每个循环的表单元素设置一个唯一的prop属性，并使用v-model绑定数据。同时，你可以使用:rules属性来定义验证规则。

以下是一个简单的例子：

<template>
  <el-form ref="form" :model="form" label-width="80px">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.value'"
      :label="'Item ' + (index + 1)"
      :rules="[
        { required: true, message: '请输入内容', trigger: 'blur' },
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>
 
<script>
export default {
  data() {
    return {
      form: {
        items: [
          { value: '' },
          { value: '' },
          // 可以根据需要添加更多的items
        ]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          alert('验证通过');
        } else {
          console.log('验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个例子中，我们定义了一个包含多个items的form对象，每个item都有一个value属性用于绑定输入字段。在el-form-item中，我们使用:prop动态设置为items.[index].value，这样每个表单项都有一个独特的验证规则。:rules属性定义了字段需要输入的长度和必填性。当用户点击提交按钮时，会触发submitForm方法，该方法会调用表单的validate方法来进行验证。如果所有的表单项都通过验证，则会弹出一个提示框显示“验证通过”，否则在控制台输出“验证失败”。