【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）

在Element UI中，如果你想在一个el-form-item下面对多个表单项进行循环验证，你可以使用v-for指令来遍历数据，并为每个项目创建一个验证规则。以下是一个简单的例子：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.value'"
      :label="'Item ' + (index + 1)"
    >
      <el-input v-model="item.value"></el-input>
    </el-form-item>
 
    <el-button type="primary" @click="validateForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          items: [
            { value: '' },
            { value: '' },
            // 可以添加更多的项
          ]
        },
        rules: {
          items: [
            { validator: this.validateItems, trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('验证通过');
          } else {
            alert('验证失败');
            return false;
          }
        });
      },
      validateItems(rule, value, callback) {
        // 对form.items数组中的每个项进行验证
        for (let i = 0; i < value.length; i++) {
          if (!value[i].value) {
            return callback(new Error(`Item ${i + 1} 不能为空`));
          }
        }
        callback();
      }
    }
  };
</script>

在这个例子中，我们定义了一个form对象，它有一个items数组，数组中的每个对象都有一个value属性用于存放用户的输入。rules对象中的items属性定义了一个验证函数validateItems，该函数会遍历items数组，对每个项运行验证。如果任何一个项的验证失败，则会返回错误信息。