for循环出多个el-popover,点击其中一个popover弹出有表单的弹框,点击确认出发表单校验规则,校验通过后清空表单并关闭POPOVER

在前端开发中，你可以使用Vue.js、Angular或React等框架结合HTML和JavaScript来创建这样的交互效果。这里是一个基本的Vue示例：

首先，你需要在模板里创建多个`<el-popover>`元素，并绑定一个数组作为数据源，每个元素代表一个Popover。

<template>
  <div id="app">
    <el-button v-for="(item, index) in popovers" :key="index" @click="showPopover(index)">
      点击打开Popover {{ item.title }}
    </el-button>
    <el-popover
      v-model="activePopover"
      placement="bottom"
      width="200"
      trigger="manual"
      :content="formContent[index]"
      @hide="closePopover(index)"
    ></el-popover>
  </div>
</template>

然后，在Vue组件的数据中定义popovers数组和对应的内容：

export default {
  data() {
    return {
      popovers: [
        { title: 'Popover 1', content: '<form #form1></form>' },
        { title: 'Popover 2', content: '<form #form2></form>' }
        // 更多的Popover...
      ],
      activePopover: -1,
      formContent: [],
    };
  },
  methods: {
    showPopover(index) {
      this.activePopover = index;
      // 初始化表单内容...
    },
    closePopover(index) {
      this.activePopover = -1;
      // 校验表单、清空表单并关闭Popover...
    },
    validateForm(index) {
      let isValid = validateYourForm(this.formContent[index]);
      if (isValid) {
        this.$refs['form' + index].reset();
        this.closePopover(index);
      }
    },
  },
};

在这个例子中，当你点击某个按钮时，对应的Popover会显示。在表单中添加必要的校验规则，并在用户点击确认按钮时调用`validateForm(index)`方法进行校验。如果校验通过，清空表单内容，并隐藏相应的Popover。

记得替换`validateYourForm(formContent)`为实际的表单验证函数，这将根据你的业务需求来编写校验规则。