在登录页面中验证用户名和密码是否正确 正确,跳转到主页面 错误 不跳转 且清空表单中所有内容
时间: 2024-05-07 12:22:57 浏览: 7
您可以使用以下代码实现这个功能:
```html
<!-- 登录页面 -->
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br>
<input type="submit" value="登录">
</form>
<script>
document.getElementById("login-form").addEventListener("submit", function(event) {
event.preventDefault(); // 防止表单自动提交
// 获取用户名和密码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
// 发送验证请求
var xhr = new XMLHttpRequest();
xhr.open("POST", "/api/login");
xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
xhr.onload = function() {
if (xhr.status === 200) { // 验证成功
window.location.href = "/main.html"; // 跳转到主页面
} else { // 验证失败
alert("用户名或密码错误!");
document.getElementById("username").value = ""; // 清空用户名输入框
document.getElementById("password").value = ""; // 清空密码输入框
}
};
xhr.send(JSON.stringify({username: username, password: password}));
});
</script>
```
在上面的代码中,我们通过 `addEventListener` 方法为表单的 `submit` 事件添加了一个监听器。当用户点击登录按钮并提交表单时,该监听器会被触发。
在监听器中,我们首先调用 `event.preventDefault()` 方法来防止表单自动提交。然后,我们通过 `document.getElementById` 方法获取用户名和密码,并使用 `XMLHttpRequest` 对象发送一个 POST 请求到 `/api/login` 接口。
当请求完成时,我们检查响应的状态码。如果状态码是 200,说明验证成功,我们就可以通过 `window.location.href` 属性跳转到主页面。否则,我们就弹出一个提示框告诉用户用户名或密码错误,并清空表单中的所有内容。
需要注意的是,上面的代码中使用了 AJAX 技术来发送请求和接收响应。如果您不熟悉 AJAX,建议您先学习一下相关知识。