Vue3 Element-plus 多表单同时校验

确保所有表单项都经过验证并且都有效。如果直接依次验证每个表单项，并且在前一个验证完成后才开始下一个验证，这样效率会比较低。使用 Promise.all 可以同时进行多个验证任务.

代码实现：

const submitForm = async (formEl: FormInstance | undefined) => {
  // 验证 ruleFormRefB 是否为有效的数组
  if (!formEl || !Array.isArray(ruleFormRefB.value)) {
    console.log("Invalid ruleFormRefJI value");
    return;
  }

  try {
    // 生成所有 ruleFormRefB 表单项的验证 Promise
    const ruleFormValidations = ruleFormRefB.value.map(
      (element) =>
        new Promise<void>((resolve, reject) => {
          element.validate((valid, fields) => {
            if (valid) {
              resolve();
            } else {
              reject({ message: "error submit!", fields });
            }
          });
        })
    );

    // 生成主表单的验证 Promise
    const formElValidation = formEl
      ? new Promise<void>((resolve, reject) => {
          formEl.validate((valid, fields) => {
            if (valid) {
              resolve();
            } else {
              reject({ message: "error submit!", fields });
            }
          });
        })
      : Promise.resolve();

    // 等待所有验证通过
    await Promise.all([...ruleFormValidations, formElValidation]);

    // 提交表单数据
    console.log(form.value);
    let data = await Proapi().savemeasure(form.value);

    if (data.status * 1 === 200) {
      dialogFormVisible.value = false;
      ElMessage({
        message: "添加成功",
        type: "success",
      });
      getdata();
    } else {
      ElMessage({
        message: data.msg,
        type: "warning",
      });
    }

    console.log(data);
  } catch (error) {
    if (Array.isArray(error)) {
      error.forEach((e) => console.log(e.message, e.fields));
    } else {
      console.log(error.message, error.fields);
    }
  }
};