需求描述

• 表单为数组 v-for 循环得到的多表单，如可自由增删的动态表单
• 表单中存在异步校验规则，如姓名需访问接口校验是否已存在
• 点击提交按钮，需一键校验所有表单，仅当所有表单都通过校验，才能最终提交到后台

效果预览

技术要点

• 校验规则 rules 可复用，编写一套即可

异步校验规则的写法

let checkName = (rule, value, callback) => {
  axios({
    method: "get",
    url: "https://jsonplaceholder.typicode.com/posts",
    params: {
      userId: value,
    },
  }).then((res) => {
    if (res.data.length) {
      return callback(new Error("已存在"));
    } else {
      return callback();
    }
  });
};

此处的接口是公共的免费接口，仅模拟效果，不必深究传参和返回

formRules: {
  name: [
    { required: true, trigger: "blur", message: "请输入姓名" },
    { validator: checkName, trigger: "blur" },
  ],
},

v-for 中的 ref 属性用静态字符串

通常，若两个元素 ref 属性相同，通过 this.$refs 只能获取到最终的元素

    <p ref="p1">1</p>
    <p ref="p1">2</p>

this.$refs.p1  // 获取到的是 <p>2</p>

但在 v-for 中的 ref ，通过 this.$refs 得到的是一个数组

所以，此例中，获取第一个表单的方法是

this.$refs.formRef[0]

forEach中使用 await 无效！

forEach 只支持同步，不支持异步
所以此例多表单的校验需改用 for 循环，通过 break 还可提前跳出 for 循环

添加 try catch 捕获 await 中的报错

• 添加 try catch 可避免控制台报错，同时避免报错阻塞代码的执行，可提升用户体验。
• 给每一个await 都添加 try catch ，可在 catch 中可获知具体是哪一个表单校验失败！

代码实现

<template>
  <div style="padding: 30px; width: 300px">
    <div v-for="(formData, formIndex) in formList" :key="'form' + formIndex">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-width="110px"
        size="mini"
        status-icon
      >
        <el-form-item :label="`表单 ${formIndex + 1} 的姓名`" prop="name">
          <el-input v-model="formData.name" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    let checkName = (rule, value, callback) => {
      axios({
        method: "get",
        url: "https://jsonplaceholder.typicode.com/posts",
        params: {
          userId: value,
        },
      }).then((res) => {
        if (res.data.length) {
          return callback(new Error("已存在"));
        } else {
          return callback();
        }
      });
    };

    return {
      formList: [{}, {}],
      formRules: {
        name: [
          { required: true, trigger: "blur", message: "请输入姓名" },
          { validator: checkName, trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    async submit() {
      let formRefList = this.$refs.formRef;
      let result = true;

      for (let index = 0; index < this.formList.length; index++) {
        try {
          await formRefList[index].validate();
          console.log(`第${index + 1}个表单通过校验`);
        } catch (error) {
          console.log(`第${index + 1}个表单校验失败`);
          result = false;
          break;
        }
      }

      if (result) {
        console.log(`所有表单通过校验`);
      } else {
        console.log(`存在表单校验失败`);
      }
    },
  },
};
</script>