JavaScript表单验证中e.preventDefault()的正确放置位置

核心思路是跟踪验证是否失败，只有当存在验证不通过的字段时，才阻止表单提交。

步骤1：修改engine函数，返回验证状态 #

让engine函数返回当前字段的验证结果（true表示通过，false表示失败）：

let engine = (id, serial, message) => {
  if(id.value.trim() === ""){
    errorMsg[serial].innerHTML = message;
    faulureIcon[serial].style.opacity = "1"; // 修正原代码中"opaity"的拼写错误
    successIcon[serial].style.opacity = "0";
    return false; // 验证失败，返回false
  } else {
    errorMsg[serial].innerHTML = "";
    faulureIcon[serial].style.opacity = "0";
    successIcon[serial].style.opacity = "1";
    return true; // 验证通过，返回true
  }
}

步骤2：调整表单提交事件逻辑 #

移除一开始就执行的e.preventDefault()，改为先完成所有字段验证，根据验证结果决定是否阻止提交：

form.addEventListener("submit", (e) => {
  // 执行所有字段验证，保存每个字段的验证状态
  const isNameValid = engine(username, 0, "Name cannot be blank");
  const isEmailValid = engine(email, 1, "Email cannot be blank");
  const isMessageValid = engine(message, 2, "Message cannot be blank");

  // 只要有一个字段验证失败，就阻止表单提交
  if (!isNameValid || !isEmailValid || !isMessageValid) {
    e.preventDefault();
  }
})

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