el-form-item for循环添加校验,代码

在Vue.js中，`el-form` 和 `el-form-item` 组件经常用于构建表单，并且可以结合使用 `v-for` 循环动态生成输入项并添加验证规则。下面是一个简单的例子，展示了如何在一个数组中通过 `for` 循环为每个表单项添加验证：

<template>
  <el-form ref="form" :inline="true">
    <div v-for="(item, index) in itemsToValidate" :key="index">
      <el-form-item label="字段{{ index + 1 }}">{{ item.name }}</el-form-item>
      <el-input v-model="item.value"></el-input>
      <!-- 这里添加验证规则 -->
      <el-form-item :rules="[{
        required: true,
        message: '此项必填',
        trigger: ['blur', 'change']
      }]">
      </el-form-item>
    </div>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      itemsToValidate: [
        { name: '姓名', value: '' },
        { name: '邮箱', value: '' },
        // 更多表单项...
      ]
    };
  }
};
</script>

在这个例子中，`itemsToValidate` 是一个包含对象的数组，每个对象代表一个表单项，包含了名字和初始值。在 `el-form-item` 中，我们指定了对应的字段名，并在相邻的 `el-form-item` 标签内设置了验证规则，如必填、触发事件等。