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




