多表单校验后执行操作代码优化

问题

在页面多个表单校验完成后进行操作，结果校验结果 flag 始终是 undefined。

    validatePage() {
      if (!this.form.tag) {
        this.$message.warning("请先设置产品标识");
        return false;
      } else {
        this.$refs.form.validate((valid1) => {
          if (!valid1) {
            this.$message.warning("请把表单填写完整");
            return valid1;
          } else {
            let graphicForm = this.$refs.graphicGroup.form;
            let valid2 = !Object.keys(graphicForm).some(
              (key) => graphicForm[key] === ""
            );
            if (!valid2) {
              this.$message.warning("请检查图形属性是否填写完整");
            }
            return valid2;
          }
        });
      }
    },
	// 在父组件中调用
    async handleNextStep() {
        const flag = await this.$refs.productBasic.validatePage();
        if (!flag) return;
        this.contentLoading = true;
        this.$refs.productBasic.handleNextPage().then((res) => {
          // 执行操作……
          this.contentLoading = false;
        });
    },

原因

表单校验是异步的。

// 使用前：返回值不一致
validatePage() {
  if (!this.form.tag) {
    return false; // 同步返回
  } else {
    this.$refs.form.validate((valid1) => {
      // 异步回调，无法直接返回
    });
    // 这里没有返回值，实际上是返回 undefined
  }
}

// 使用后：始终返回 Promise
validatePage() {
  return new Promise((resolve) => {
    // 所有分支都通过 resolve 返回结果
    resolve(true/false);
  });
}

解决

改为 promise 返回，结果要用 resolve。

使用 Promise 的主要优势：

解决异步回调的返回值问题

提供一致的接口返回值

便于后续的异步操作和错误处理

与现代 JavaScript 的 async/await 语法更好地集成

    validatePage() {
      return new Promise((resolve) => {
        if (!this.form.tag) {
          this.$message.warning("请先设置产品标识");
          resolve(false);
        } else {
          this.$refs.form.validate((valid1) => {
            if (!valid1) {
              this.$message.warning("请把产品信息填写完整");
              resolve(false);
            } else {
              this.$refs.featureForm.validate((valid2) => {
                if (!valid2) {
                  this.$message.warning("请把特征信息填写完整");
                  resolve(false);
                } else {
                  let graphicForm = this.$refs.graphicGroup.form;
                  let valid3 = !Object.keys(graphicForm).some(
                    (key) => graphicForm[key] === ""
                  );
                  if (!valid3) {
                    this.$message.warning("请把图形属性填写完整");
                  }
                  resolve(valid3);
                }
              });
            }
          });
        }
      });
    },

优化

多表单回调，代码可进一步回调如下

    async validatePage() {
      if (!this.form.tag) {
        this.$message.warning("请先设置产品标识");
        return false;
      }

      const valid1 = await new Promise((resolve) =>
        this.$refs.form.validate(resolve)
      );
      if (!valid1) {
        this.$message.warning("请把产品信息填写完整");
        return false;
      }

      const valid2 = await new Promise((resolve) =>
        this.$refs.featureForm.validate(resolve)
      );
      if (!valid2) {
        this.$message.warning("请把特征信息填写完整");
        return false;
      }

      const graphicForm = this.$refs.graphicGroup.form;
      const valid3 = Object.values(graphicForm).every((value) => value !== "");

      if (!valid3) {
        this.$message.warning("请把图形属性填写完整");
      }

      return valid3;
    },

优化二

async validatePage() {
  // 顺序验证，任一失败立即返回
  return await this.validateTag() &&
         await this.validateProductInfo() &&
         await this.validateFeatureInfo() &&
         await this.validateGraphicAttributes();
},

// 提取独立的验证方法
async validateTag() {
  if (!this.form.tag) {
    this.$message.warning("请先设置产品标识");
    return false;
  }
  return true;
},

async validateProductInfo() {
  const isValid = await this.promiseValidate(this.$refs.form);
  if (!isValid) {
    this.$message.warning("请把产品信息填写完整");
  }
  return isValid;
},

async validateFeatureInfo() {
  const isValid = await this.promiseValidate(this.$refs.featureForm);
  if (!isValid) {
    this.$message.warning("请把特征信息填写完整");
  }
  return isValid;
},

async validateGraphicAttributes() {
  const graphicForm = this.$refs.graphicGroup.form;
  const isValid = Object.values(graphicForm).every(value => value !== "");
  if (!isValid) {
    this.$message.warning("请把图形属性填写完整");
  }
  return isValid;
},

// 通用的 Promise 封装方法
promiseValidate(formRef) {
  return new Promise(resolve => formRef.validate(resolve));
}

优化三

async validatePage() {
  try {
    await this.validateAll();
    return true;
  } catch (error) {
    this.$message.warning(error.message);
    return false;
  }
},

async validateAll() {
  if (!this.form.tag) {
    throw new Error("请先设置产品标识");
  }

  if (!await this.promiseValidate(this.$refs.form)) {
    throw new Error("请把产品信息填写完整");
  }

  if (!await this.promiseValidate(this.$refs.featureForm)) {
    throw new Error("请把特征信息填写完整");
  }

  const graphicForm = this.$refs.graphicGroup.form;
  if (!Object.values(graphicForm).every(value => value !== "")) {
    throw new Error("请把图形属性填写完整");
  }
},

promiseValidate(formRef) {
  return new Promise(resolve => formRef.validate(resolve));
}

优化四

async validatePage() {
  // 提取通用验证方法
  const validateForm = (ref, message) => new Promise(resolve => {
    ref.validate(valid => {
      if (!valid) this.$message.warning(message);
      resolve(valid);
    });
  });

  // 顺序验证
  if (!this.form.tag) {
    this.$message.warning("请先设置产品标识");
    return false;
  }

  if (!await validateForm(this.$refs.form, "请把产品信息填写完整")) {
    return false;
  }

  if (!await validateForm(this.$refs.featureForm, "请把特征信息填写完整")) {
    return false;
  }

  const graphicForm = this.$refs.graphicGroup.form;
  const isGraphicValid = Object.values(graphicForm).every(value => value !== "");
  
  if (!isGraphicValid) {
    this.$message.warning("请把图形属性填写完整");
  }

  return isGraphicValid;
}