使用html要求,写一个登录系统验证指定账号密码,验证成功弹出登录成功并且跳转到主页面,主页面要获取登录系统的用户名,登录失败要弹框alert()
时间: 2024-02-05 16:05:23 浏览: 24
好的,以下是使用 HTML 编写的登录系统验证指定账号密码的代码,包括登录成功后跳转到主页面并获取登录系统的用户名,以及登录失败后弹出提示框:
```html
<!DOCTYPE html>
<html>
<head>
<title>Login System</title>
</head>
<body>
<h1>Login System</h1>
<form onsubmit="return login()">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
<script>
function login() {
// 指定账号密码
var username = "admin";
var password = "password";
// 获取用户输入的账号密码
var input_username = document.getElementById("username").value;
var input_password = document.getElementById("password").value;
// 验证账号密码是否正确
if (input_username === username && input_password === password) {
// 登录成功,跳转到主页面并获取登录系统的用户名
window.location.href = "main.html?username=" + username;
return false;
} else {
// 登录失败,弹出提示框
alert("Username or password is incorrect.");
return false;
}
}
</script>
</body>
</html>
```
在上面的代码中,我们使用了一个 form 表单来获取用户输入的账号和密码,然后在 JavaScript 中进行验证。如果验证成功,则使用 `window.location.href` 跳转到主页面,并通过 URL 参数传递用户名;如果验证失败,则使用 `alert()` 弹出提示框。需要注意的是,在表单的 `onsubmit` 事件中,我们调用了 `login()` 函数来进行验证,并使用 `return` 来阻止表单的默认提交行为。