点击提交按钮提交JavaScript表单跳转失败问题排查

看起来你遇到的核心问题是误用了按位与运算符&，这导致表单提交的校验逻辑不符合预期，进而阻止了页面跳转。我来一步步拆解问题并给出修复方案：

1. 核心错误：& vs &&的区别 #

你在onsubmit里写的!!(checkForEmail() & checkForBlank() & checkForGsm())用了按位与运算符&，但这里需要的是逻辑与运算符&&：

• &是按位运算，它会把布尔值转换成整数（true→1，false→0）再做位运算，不仅逻辑判断容易出问题，还会强制执行所有三个校验函数（哪怕前面已经校验失败）。
• &&是专门用于布尔逻辑判断的运算符，它会短路执行（只要遇到一个false就停止后续函数），而且返回的结果直接符合表单提交的布尔判断需求。

2. 修复后的表单代码 #

直接把&替换成&&，甚至可以去掉多余的!!（因为&&本身就会返回正确的布尔值）：

<form method="get" onsubmit="return checkForEmail() && checkForBlank() && checkForGsm();" action="submitted.html">

3. 校验函数的正确性确认 #

还要确保你的校验函数返回逻辑是对的：

• 当校验通过时，函数返回true（允许表单提交）
• 当校验不通过时，函数返回false（阻止表单提交）

比如你的checkForBlank函数，应该写成这样的逻辑：

function checkForBlank() {
  var nom = document.getElementById("fname").value;
  var prenom = document.getElementById("lname").value;
  var errorMessage = "";
  
  if (nom.trim() === "" || prenom.trim() === "") {
    errorMessage = "请填写所有必填字段";
    alert(errorMessage); // 或者把错误信息显示在页面上
    return false; // 校验失败，阻止提交
  }
  return true; // 校验通过，允许提交
}

为什么原来的代码会失效？ #

假设某个校验函数返回false（比如用户没填姓名），按位运算&会把false转成0，最终整个表达式的结果是0，!!0得到false，这时候onsubmit返回false，表单就不会提交，自然跳不到submitted.html。而用&&的话，只要有一个函数返回false，整个表达式直接返回false，逻辑更清晰，也符合表单提交的判断逻辑。

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