如何阻止校验不通过的表单提交、展示错误并避免页面刷新

e.stopPropagation()的作用是阻止事件向上冒泡传播，无法拦截表单提交的默认行为，这就是你校验失败后页面仍然刷新跳转的核心原因。

拦截表单默认提交刷新行为，需要调用事件实例的e.preventDefault()方法。同时你现有代码存在逻辑漏洞，需要同步修复：

• 校验状态变量pass必须在每次提交事件触发时重置为false，否则上一次登录成功的状态会残留，导致后续输错账号密码也会错误放行
• 账号密码匹配校验命中后可以直接终止遍历，不需要跑完整个循环，减少不必要的计算
• 校验通过时再设置表单跳转地址，校验失败时拦截默认提交行为，展示错误提示即可

修正后的完整代码参考：

const accounts = [
  ["myaccount", "mypassword1"],
  ["myaccount2", "mypassword2"],
];
const signInForm = document.getElementById("info");
signInForm.addEventListener("submit", (e) => {
  // 每次提交重置校验状态，避免历史结果干扰
  let pass = false;
  // 替换为你实际获取输入框账号、密码值的逻辑
  const id = document.getElementById("accountInput").value.trim();
  const password = document.getElementById("passwordInput").value.trim();

  for (const [account, pwd] of accounts) {
    if (account === id && pwd === password) {
      pass = true;
      break; // 命中匹配直接跳出循环
    }
  }

  if (pass) {
    signInForm.action = "builder.html";
    // 校验通过不做拦截，让表单正常提交跳转
  } else {
    // 核心方法：阻止表单默认提交的刷新/跳转行为
    e.preventDefault();
    document.getElementById("error").innerText = "账号或密码错误";
  }
});

补充说明：不需要额外给提交按钮绑定click事件做拦截，只要在表单的submit事件回调里正确调用preventDefault()，无论提交来源是点击按钮还是按回车触发表单提交，校验失败时都不会触发页面刷新。

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