使用image、textlnput、button组件实现登录页面,单击按钮后判断输入的用户名和密码,如果用户名为张三,密码为123,则跳转page页面输出登录成功
时间: 2024-10-01 15:10:54 浏览: 5
要在前端实现一个简单的登录页面,你可以使用HTML的基本元素配合JavaScript进行验证。以下是一个基础示例:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form id="loginForm">
<label for="username">Username:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password"><br><br>
<button type="button" onclick="checkLogin()">Login</button>
</form>
<script>
function checkLogin() {
const usernameInput = document.getElementById("username").value;
const passwordInput = document.getElementById("password").value;
if (usernameInput === "张三" && passwordInput === "123") {
window.location.href = "page.html";
alert("登录成功");
} else {
alert("用户名或密码错误,请重试!");
}
}
</script>
</body>
</html>
```
在这个例子中,当用户点击“Login”按钮时,会触发`checkLogin`函数。这个函数获取输入框中的值,并检查是否与预设的用户名和密码匹配。如果匹配,页面将跳转到`page.html`并显示提示消息;如果不匹配,就弹出警告告知用户输入错误。