登录验证通过后无法跳转至example.html的问题排查求助

嘿，我看到你的问题了——登录验证通过后没法跳转到example.html，对吧？咱们来一步步排查问题所在。

核心问题：表单的默认提交行为干扰了跳转逻辑 #

你的登录按钮是type="submit"类型，点击它时，除了触发你写的check()函数，浏览器还会执行表单的默认提交行为（因为<form>标签没有指定action和method，默认会以GET方式提交到当前页面）。这会导致页面瞬间刷新，直接打断了window.open("example.html")的执行，所以你看不到任何跳转效果。

三种修复方案，任选其一即可 #

方案1：修改onclick事件，阻止默认提交

修改按钮的onclick属性，让它返回check()函数的结果，同时在函数里返回false来阻止默认提交：

<script type="text/javascript">
  var message = "Right Click Disabled!";
  function rtclickcheck(keyp) {
    if (navigator.appName == "Netscape" && keyp.which == 3) {
      alert(message);
      return false;
    }
    if (navigator.appVersion.indexOf("MSIE") != -1 && event.button == 2) {
      alert(message);
      return false;
    }
  }
  document.onmousedown = rtclickcheck;

  function check(form) {
    if (form.username.value == "admin" && form.password.value == "123") {
      window.open("example.html");
      // 阻止表单默认提交行为
      return false;
    } else {
      alert("Username Or Password Doesn't Match!");
      return false;
    }
  }
</script>

<!-- 修改按钮的onclick -->
<input type="submit" onclick="return check(this.form)" name="btn_submit" value="Login">

方案2：把按钮改成普通button类型

直接将按钮的type从submit改成button，这样就不会触发表单的默认提交行为，点击时只会执行check()函数：

<input type="button" onclick="check(this.form)" name="btn_submit" value="Login">

方案3：给表单绑定onsubmit事件

把验证逻辑移到表单的onsubmit事件中，同样通过返回false阻止默认提交：

<form onsubmit="return check(this)">
  <input type="text" placeholder="Username" name="username">
  <br>
  <input type="password" placeholder="Password" name="password">
  <br>
  <input type="submit" name="btn_submit" value="Login">
</form>

<script type="text/javascript">
  // ... 其他代码不变 ...
  function check(form) {
    if (form.username.value == "admin" && form.password.value == "123") {
      window.open("example.html");
      return false;
    } else {
      alert("Username Or Password Doesn't Match!");
      return false;
    }
  }
</script>

额外提示 #

如果希望直接跳转到example.html（而不是打开新窗口），可以把window.open("example.html")改成window.location.href = "example.html"，这样体验会更符合常规登录流程。

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