HTML表单中带if判断的JavaScript重定向不生效如何解决

跳转失效和你用的location系列API没有任何关系，核心原因是表单默认提交行为打断了JS跳转逻辑：

• 你把校验函数绑定在提交按钮的onclick事件上，点击type="submit"的按钮时，浏览器会先执行绑定的JS逻辑，之后立刻触发表单默认提交动作
• 你的表单action属性为空，默认提交目标就是当前页面，会触发页面刷新。加了if判断后，JS需要先做取值、条件比对，执行耗时稍长，跳转逻辑还没生效，页面就已经被刷新重载，自然看不到跳转效果
• 去掉if直接写跳转时，JS执行路径极短，跳转指令发出的时机早于表单提交刷新，所以能正常跳转，本质是时序巧合，不是逻辑正确。

核心思路是阻止表单的默认提交行为，两种常用实现都可以：

方案1：修改现有onclick绑定，返回false拦截默认行为 #

1. 修改提交按钮的事件绑定，增加return接收函数返回值：

   <input type="submit" value="Login" onclick="return testResults(this.form)" />
   

2. 修改JS校验函数，末尾固定返回false阻止表单提交：

   function testResults (form) {
       var given_username = form.username.value;
       var given_password = form.password.value;
       var correct_username = "123";
       var correct_password = "123";
   
       if (given_username == correct_username && given_password == correct_password) {
           window.location.assign("redirected.html");
       } else {
           alert("Wrong username and/or password.")
       }
       // 拦截表单默认提交刷新动作
       return false;
   }
   

方案2：将校验逻辑绑定到表单submit事件（更规范） #

1. 把事件从按钮移到form标签上，去掉按钮的onclick绑定：

   <form action="" method="get" onsubmit="return testResults(this)">
       <!-- 其余表单元素不变，提交按钮不用绑事件 -->
       <input type="submit" value="Login" />
   </form>
   

2. JS函数逻辑和方案1完全一致，末尾返回false即可。

注意：当前你把正确账号密码明文写在前端JS里没有任何安全性，任何人打开网页源码就能看到正确凭据，正式场景的身份校验必须放在服务端实现，前端仅做输入格式的初步校验。

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