如何在表单字段全部校验通过后执行提交函数？

你的现有代码只完成了单字段的错误/成功状态设置，没有返回整个表单的校验结果，所以无法判断是否可以触发提交。按以下方式修改即可：

• 在校验函数中初始化一个全局校验状态标记，初始值为true（代表默认校验通过）
• 任意字段校验不通过时，将该标记置为false
• 校验函数执行完成后返回这个状态标记
• 按钮点击事件中，只有拿到校验通过的返回值时，才执行实际的提交逻辑

修改后的代码 #

调整校验函数，增加返回值 #

const checkInputs = () => {
  // 初始化表单整体校验状态为通过
  let isFormValid = true;

  if (bankName.value.trim() === "") {
    setError(bankName, "银行名称不能为空");
    isFormValid = false;
  } else {
    setSuccess(bankName);
  }

  if (interestRate.value.trim() === "") {
    setError(interestRate, "利率不能为空");
    isFormValid = false;
  } else {
    setSuccess(interestRate);
  }

  if (maximumLoan.value.trim() === "") {
    setError(maximumLoan, "最高贷款额度不能为空");
    isFormValid = false;
  } else {
    setSuccess(maximumLoan);
  }

  if (minimumDownPayment.value.trim() === "") {
    setError(minimumDownPayment, "最低首付比例不能为空");
    isFormValid = false;
  } else {
    setSuccess(minimumDownPayment);
  }

  if (loanTerm.value.trim() === "") {
    setError(loanTerm, "贷款期限不能为空");
    isFormValid = false;
  } else {
    setSuccess(loanTerm);
  }

  // 返回最终校验结果
  return isFormValid;
};

调整按钮点击逻辑，校验通过后再提交 #

const addBanksFunc = () => {
  addBankButton.addEventListener("click", (event) => {
    event.preventDefault();
    // 执行全字段校验，获取校验结果
    const validatePass = checkInputs();
    if (validatePass) {
      // 此处写你的实际提交逻辑，比如调用接口提交表单数据
      console.log("所有字段符合规则，开始提交表单");
      // 提交逻辑示例：
      // fetch('/api/addBank', {
      //   method: 'POST',
      //   body: JSON.stringify({
      //     bankName: bankName.value,
      //     interestRate: interestRate.value,
      //     maximumLoan: maximumLoan.value,
      //     minimumDownPayment: minimumDownPayment.value,
      //     loanTerm: loanTerm.value
      //   })
      // })
    }
  });
};

优化提示 #

空值判断时增加.trim()是为了过滤用户输入全空格的非法场景。如果后续需要新增校验规则（比如利率必须为正数、贷款期限必须为整数等），只需要在对应字段的校验分支中，不满足规则时将isFormValid设为false即可，整体提交判断逻辑不需要调整。

内容的提问来源于stack exchange，提问作者userName