Bootstrap 5表单验证事件监听器中页面跳转实现方法咨询

我用纯JavaScript实现表单验证功能，直接参考Bootstrap 5的验证示例编写了以下代码：

// Loop over them and prevent submission
Array.from(forms).forEach((form) => {
  form.addEventListener(
    'submit',
    (event) => {
      if (!form.checkValidity()) {
        event.preventDefault()
        event.stopPropagation()
        console.log("!form.checkValidity()")
      } else {
        // save data, then redirect
        console.log("form.checkValidity()")
        // window.location.href="" and replace() don't work
      }

      form.classList.add('was-validated')

    },
    false
  )
})

验证功能正常运行，form.checkValidity() == true的分支也能正常触发，但验证通过并保存数据后，无法跳转到同站点的页面（比如page2.html），window.location.href和replace()都没有效果，请问问题出在哪里？

问题核心是验证通过时，浏览器默认的表单提交行为会覆盖你的跳转逻辑——你只在验证不通过时阻止了默认提交，验证通过时没有阻止，导致浏览器优先执行表单提交，跳转代码根本没机会生效。

有两种可行的解决方式：

方式一：在验证通过分支中先阻止默认提交 #

else {
  event.preventDefault(); // 阻止默认表单提交
  // 执行数据保存逻辑
  console.log("form.checkValidity()");
  window.location.href = "page2.html"; // 跳转生效
}

方式二：全局阻止默认提交（推荐，适合无后端表单提交场景） #

如果你的表单完全通过JavaScript处理数据，不需要浏览器默认的提交行为，可以在事件监听的最开头就阻止所有默认提交动作，再根据验证结果处理逻辑：

Array.from(forms).forEach((form) => {
  form.addEventListener(
    'submit',
    (event) => {
      // 先阻止所有默认提交和事件冒泡
      event.preventDefault();
      event.stopPropagation();

      if (!form.checkValidity()) {
        console.log("!form.checkValidity()");
      } else {
        // 数据保存逻辑
        console.log("form.checkValidity()");
        window.location.href = "page2.html";
      }

      form.classList.add('was-validated');
    },
    false
  )
})

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