HTML登录验证成功后无法跳转页面问题求助

核心问题 #

1. DOM元素ID不匹配：用户名输入框的id是"User ID"（带空格），但JS代码中用document.getElementById("UserID")获取，导致无法正确读取输入值，验证逻辑根本未生效。
2. 表单默认提交行为干扰：点击submit按钮时，浏览器会默认以GET方法提交表单，将用户名和密码拼到URL中，同时刷新页面，直接覆盖了window.location.href的跳转操作。
3. 弹窗与跳转顺序错误：先执行跳转再弹出alert，alert会阻塞页面跳转，导致跳转被延迟或中断。

修复后的完整代码 #

<!DOCTYPE html>
<html>
<head>
</head>
<body> 
<div class="login-wrapper">
<form action="" class="form">
    <h2> Login </h2><br>
<div class="input-group"> 
    <label for="id">User ID </label> 
    <input type="text"
     name="id"
     id="UserID" <!-- 修正ID，去掉空格 -->
    placeholder="User ID"
     required /> 
</div> 
<div class="input-group"> 
    <label>Password </label> 
    <input type="password"
     name="password"
     placeholder="Password"
    id="password" required />
 </div>
<!-- 修改onclick为return auth()，阻止表单默认提交 -->
<input type="submit" value="Login" class="submit-btn" onclick="return auth()" style="font-size:18px;" />
</form>
</div>
<script>
    function auth(){
    var UserID = document.getElementById("UserID").value; // 对应修正后的ID
    var password = document.getElementById("password").value; 
    if(UserID === "admin" && password === "admin123")
    {
        alert("Login Successfully "); // 先弹窗再跳转
        window.location.href = "teachergui.html";
        return false; // 阻止表单提交
    }
    else{
        alert("Invalid User");
        return false; // 阻止表单提交
    }
}
</script>
</body>
</html>

额外优化建议 #

• 可以把submit按钮改成普通button类型（<button type="button" onclick="auth()">Login</button>），彻底避免表单默认提交行为，代码更简洁。
• 前端验证仅用于用户体验优化，真实项目中必须配合后端验证，不能依赖前端硬编码的用户名密码。

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