js实现一个登陆页面
时间: 2024-01-20 20:03:29 浏览: 16
下面是一个简单的HTML和JavaScript实现的登陆页面,其中使用了jQuery库简化了DOM操作:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<form id="login-form">
<label for="username">用户名:</label>
<input type="text" id="username" name="username"><br><br>
<label for="password">密码:</label>
<input type="password" id="password" name="password"><br><br>
<button type="submit" id="login-btn">登陆</button>
</form>
<script>
$(function() {
$("#login-form").on("submit", function(e) {
e.preventDefault(); // 阻止表单默认提交行为
var username = $("#username").val();
var password = $("#password").val();
// 进行用户验证等操作
// ...
// 此处简单做个示例,如果用户名和密码都是admin,则认为登陆成功
if(username === "admin" && password === "admin") {
alert("登陆成功!");
} else {
alert("用户名或密码错误!");
}
});
});
</script>
</body>
</html>
```
以上代码实现了一个简单的登陆页面,用户可以输入用户名和密码,点击登陆按钮进行登陆。在实际项目中,需要进行更加完善的用户验证等操作。