You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

JavaScript正确密码验证后页面跳转失效,错误链接反而可跳转的问题求助

解决密码验证后页面跳转被忽略的问题

嘿,这个问题我太熟了——罪魁祸首就是表单的默认提交行为

问题根源分析

当你点击<input type="submit">按钮时,浏览器会自动触发表单的默认提交逻辑:它会尝试把表单数据发送到action属性指定的地址(你的代码里action是空的,所以默认刷新当前页面)。这个过程会直接覆盖你之前通过window.location发起的页面跳转请求,所以你只能看到弹窗,跳转却被打断了。

至于为什么换成无效路径反而能“跳转”?其实那不是你的window.location在起作用,而是表单提交后找不到对应页面,浏览器显示了404错误页——本质上还是默认提交行为在主导。

解决方案(两种任选其一)

方案1:阻止表单的默认提交行为

在触发验证函数时,手动阻止浏览器的默认提交动作。修改后的代码如下:

<!DOCTYPE html> 
<html> 
<head> 
  <title>Nhic0de (WIP)</title> 
  <meta charset="UTF-8"> 
  <link rel="stylesheet" href="../css/nhicode.css"> 
  <link rel="icon" href="../msc/icon/nhicode.ico"> 
  <script type="text/javascript"> 
    function isValid(e) {
      // 阻止表单默认提交行为
      e.preventDefault();
      var password = document.getElementById('password').value;
      if (password == "start") {
        window.location = "level-1.html";
        alert(":)")
      } else {
        alert('Mauvais mot de passe !')
      }
    } 
  </script> 
</head> 
<body id="fond"> 
  <div id="contenu"> 
    <h1 style="text-align:center;"> Bienvenue sur <strong> Nihc0de ! (WORK IN PROGRESS)</strong> </h1> 
    <p> Les règles du jeu sont simples, vous devez trouver le mot de passe du niveau pour passer au niveau suivant à indiquer <a href="#mdp">ci-dessous</a> en résolvant des énigmes. <br> Les énigmes sont variées et leur méthodes de résolutions peuvent être trouvées via d'autres énigmes. <br> Pour certaines, vous devrez aller trifouiller dans votre imagination, dans le code ou bien encore sur la page. <br> Si vous rencontrez un bug veuillez <a href="../index.html#contacts">me contacter</a>. <br> Pour de l'aide supplémentaire veuillez vous réferer <a href="help.html">ici</a>. </p> 
  </div> 
  <br><br> 
  <div id="mdp"> 
    <form name="PasswordField" action=""> 
      Mot de passe: <input type="password" id="password" name="password" placeholder="Mot de passe..."> 
      <!-- 传递event参数给验证函数 -->
      <input type="submit" value="Niveau suivant" onclick="isValid(event);"> 
    </form> 
  </div> 
  <br><br> 
  <div id="contenu"> 
    <p> Sur ce, commençons la première épreuve, à <em>b1ent0t</em>. </p> 
    <hr style="height:2000pt; visibility:hidden;" /> 
    <p class="bold-em" style="font-size: 10px;" > 01110011 01110100 01100001 01110010 01110100 </p> 
  </div> 
</body> 
</html>

方案2:把提交按钮换成普通按钮

如果不需要表单的提交功能,直接把<input type="submit">改成<input type="button">,这样点击按钮只会执行你的验证函数,不会触发默认提交:

<input type="button" value="Niveau suivant" onclick="isValid();">

关于你的对比代码

其实你的对比代码也存在同样的隐患,只是可能测试时的场景让你误以为它正常工作——比如跳转路径和当前页面路径结构相似,表单提交后刷新的效果被忽略了。建议也给对比代码加上同样的修复,避免后续出现问题。

内容的提问来源于stack exchange,提问作者113xA

火山引擎 最新活动