使用 javascript 验证后无法重定向到另一个 html 页面

Question

我创建了一个 html 页面，其中有 2 个不同的页面，一个用于登录，另一个页面在成功登录后显示。

我已向 login.html 页面添加了正确的验证，如下所示：

当我想在验证输入字段后重定向并打开第二个 html 页面时，我无法打开，而是输入字段被清除并且数据显示在 URL 中。

在验证 login.html 页面中的输入字段后，如何重定向到位于同一文件夹中的landing.html 页面

 function validate(event) { event.preventDefault(); var username = document.getElementById("username").value; var password = document.getElementById("password").value; if (username == "username" && password == "user123") { window.location.href = "landing.html"; } else { alert("Invalid credentials"); } }

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="box"> <h1>Login</h1> <form class="form"> <label>Username</label> <div> <i class="fa fa-user"></i> <input type="text" name="username" id="username" placeholder="Enter Username"> </div> <label>Password</label> <div> <i class="fa fa-lock"></i> <input type="password" name="password" id="password" placeholder="Enter Password"> </div> <a href="#" class="forgot">Forgot Password?</a> <input type="submit" value="Login" onclick="validate()"> </form> </div> </div>

Answer 1

除非您将事件侦听器直接分配给按钮或表单事件，否则您不能使用 event.preventDefault

如果您有表单，请使用提交事件！

为什么不直接更改表单操作？

还强烈建议不要在 HTML 文件中包含用户 ID 和密码

 window.addEventListener("DOMContentLoaded", () => { document.querySelector(".form").addEventListener("submit", function(e) { const username = this.username.value; const password = this.password.value; if (username === "username" && password === "user123") { this.action = "landing.html"; } else { e.preventDefault(); // this goes here now alert("Invalid credentials"); } }) })

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <div class="container"> <div class="box"> <h1>Login</h1> <form class="form"> <label>Username</label> <div> <i class="fa fa-user"></i> <input type="text" name="username" id="username" placeholder="Enter Username"> </div> <label>Password</label> <div> <i class="fa fa-lock"></i> <input type="password" name="password" id="password" placeholder="Enter Password"> </div> <a href="#" class="forgot">Forgot Password?</a> <input type="submit" value="Login"> </form> </div> </div>

Answer 2

你错误地识别了问题。

没有“验证后”。

您有onclick="validate()"调用function validate(event) {将undefined传递给event参数。 然后你有event.preventDefault(); 错误是因为undefined不是事件 object。 该错误中止 function。

---

使用addEventListener绑定您的事件处理程序。 它避免了onclick属性的缺点，并将事件 object 传递给 function。

注意，在表单上监听提交事件通常也比在提交按钮上监听点击事件要好。

document.querySelector('form').addEventListener('submit', validate);

---

注意：您的方法完全不安全。 在 AuthN 完成之前，您不能向客户端提供您不希望用户拥有的数据（URL）。 他们可以只看源代码就可以看到它。 AuthN 需要在服务器上进行。