MySQL/PHP登录表单：JavaScript验证不通过时PHP脚本仍执行的解决方法求助

我来帮你搞定这个问题！你遇到的核心问题是表单验证不通过时没有阻止默认的提交行为——你的validateLog()函数虽然返回了false，但这个返回值没有被用来中断表单提交流程，所以浏览器还是会默认触发提交，让PHP脚本执行。

下面是两种可靠的解决方案，推荐第二种更通用的方式：

方案1：修正按钮的onclick事件 #

你需要让onclick事件返回validateLog()的结果，这样当验证不通过返回false时，就能直接阻止表单提交。修改后的代码如下：

修改后的HTML部分： #

<form name="LogForm" action="http://localhost/ecommerce/assets/login.php" class="login__registre" method="post" id="login-in">
  <!-- 补充用户名/密码输入框示例 -->
  <input type="text" name="usex" placeholder="Username">
  <input type="password" name="pwx" placeholder="Password">
  <!-- 关键修改：让onclick返回validateLog的结果 -->
  <input type="submit" value="Login" name="Submit" id="login__test" onclick="return validateLog()">
</form>

修改后的JavaScript部分： #

function validateLog() {
  var usexname = document.LogForm.usex;
  var pwk = document.LogForm.pwx;
  
  // 只有两项验证都通过才返回true（允许提交）
  if (alphanumeric(usexname)) {
    if (pwd_validation(pwk, 4, 20)) {
      return true;
    }
  }
  // 任意一项验证失败就返回false，阻止提交
  return false;
}

方案2：使用表单的onsubmit事件（更推荐） #

相比按钮的onclick，表单的onsubmit事件能覆盖所有提交场景（比如用户按回车键提交），可靠性更高：

修改后的HTML部分： #

<!-- 关键：给表单添加onsubmit事件，返回validateLog的结果 -->
<form name="LogForm" action="http://localhost/ecommerce/assets/login.php" class="login__registre" method="post" id="login-in" onsubmit="return validateLog()">
  <input type="text" name="usex" placeholder="Username">
  <input type="password" name="pwx" placeholder="Password">
  <!-- 这里可以去掉按钮的onclick事件，简化代码 -->
  <input type="submit" value="Login" name="Submit" id="login__test">
</form>

JavaScript部分和方案1的validateLog()函数完全一致即可 #

为什么原来的代码不起作用？ #

你原来的onclick="validateLog()"只是调用了函数，但没有把函数的返回值传递给浏览器。浏览器默认会执行提交动作，除非你明确返回false来中断它。加上return关键字后，当validateLog()返回false时，浏览器就会停止表单提交流程，PHP脚本自然也就不会被触发了。

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