element form 校验数组每一项实例代码

要实现element form校验数组每一项的功能，需要使用element-ui提供的表单校验方法和v-for指令进行遍历。

首先，在HTML中使用v-for指令进行数组遍历，生成多组表单。在每个表单中，除了设置v-model绑定数据，还需要设置rules属性绑定每个表单元素的验证规则和提示信息。如下所示：

<template>
  <el-form ref="form" :model="form" :rules="rules">
    <el-form-item v-for="(item, index) in form.list" :key="index" :label="'Item ' + index">
      <el-input v-model="item.name" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          { name: '' },
          { name: '' },
          { name: '' }
        ]
      },
      rules: {
        list: [
          { validator: this.validateList, trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    validateList(rule, value, callback) {
      for (let i = 0; i < value.length; i++) {
        const item = value[i]
        if (!item.name) {
          callback(new Error(`Item ${i} is required`))
          return
        }
      }
      callback()
    }
  }
}
</script>

以上代码展示了如何使用v-for指令遍历数组，生成多个表单元素，并在校验时循环遍历每个表单元素的值，根据自定义规则进行校验。

另外，可以结合element-ui提供的验证规则方法进行验证，如下所示：

<template>
  <el-form ref="form" :model="form">
    <el-form-item v-for="(item, index) in form.list" :key="index" :label="'Item ' + index">
      <el-input v-model="item.name" autocomplete="off" :placeholder="`Please input Item ${index}`"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">Submit</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        list: [
          { name: '' },
          { name: '' },
          { name: '' }
        ]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          alert('Submit Successfully!')
        } else {
          alert('Validation Failed!')
          return false
        }
      })
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.form.addValidateMethod((done, values) => {
        for (let i = 0; i < values.list.length; i++) {
          const item = values.list[i]
          if (item.name.trim() === '') {
            done(false, `Item ${i} is required`)
            return
          }
        }
        done()
      })
    })
  }
}
</script>

以上代码展示了如何使用el-form中的validate方法进行表单校验，并结合addValidateMethod方法自定义验证规则，当表单中每个条目的值不能为空时，触发校验失败并输出错误提示信息。