elementUI——el-form表单数据校验（包含数组循环）

在Element UI中，可以使用el-form组件配合el-form-item来创建表单并使用内置的验证规则。如果你需要对一个数组中的多个项进行验证，可以在el-form-item中使用v-for来循环数组，并为每个项设置验证规则。

以下是一个简单的例子，展示了如何使用Element UI对包含数组的表单进行数据验证：

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item
      v-for="(item, index) in form.items"
      :key="index"
      :prop="'items.' + index + '.name'"
      :label="'Item ' + (index + 1)"
    >
      <el-input v-model="item.name"></el-input>
    </el-form-item>
    <el-button type="primary" @click="validateForm">提交</el-button>
  </el-form>
</template>
 
<script>
  export default {
    data() {
      return {
        form: {
          items: [
            { name: '' },
            { name: '' }
          ]
        },
        rules: {
          items: [
            { required: true, message: '请输入项名称', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      validateForm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            alert('验证成功');
          } else {
            alert('验证失败');
            return false;
          }
        });
      }
    }
  };
</script>

在这个例子中，form 是一个包含 items 数组的对象。el-form-item 使用 v-for 来循环 items 数组，并为每个项指定一个 prop 属性，该属性值对应 form 对象中的路径，这样可以对数组中的每个项单独进行验证。rules 对象中定义了数组项的验证规则。

当你点击提交按钮时，会触发 validateForm 方法，该方法会执行表单的验证。如果所有的表单项都通过验证，会弹出一个"验证成功"的提示；如果有任何一项没有通过验证，则会弹出一个"验证失败"的提示，并返回 false 阻止提交。