jq制作一个完整的登录页面
时间: 2024-02-13 14:07:01 浏览: 20
以下是一个使用jQuery制作一个完整的登录页面的示例代码,供您参考:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登录页面</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<style>
body {
font-family: Arial, sans-serif;
}
.login-form {
width: 400px;
margin: 50px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.login-form h2 {
text-align: center;
}
.login-form input[type=text], .login-form input[type=password] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: border-box;
}
.login-form button[type=submit] {
display: block;
width: 100%;
padding: 10px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
.login-form button[type=submit]:hover {
background-color: #3e8e41;
}
.login-form .error-message {
color: #f00;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="login-form">
<h2>登录系统</h2>
<!-- 在表单中添加id和name为username和password的输入框 -->
<form id="form-login" name="form-login" method="post" action="login.php">
<input type="text" id="username" name="username" placeholder="用户名">
<input type="password" id="password" name="password" placeholder="密码">
<button type="submit">登录</button>
</form>
<!-- 用于显示错误信息 -->
<div class="error-message" id="error-message"></div>
</div>
<script>
$(function() {
$('#form-login').submit(function(event) {
// 阻止表单默认提交事件
event.preventDefault();
// 获取用户名和密码输入框的值
var username = $('#username').val();
var password = $('#password').val();
// 判断用户名和密码是否为空
if (!username) {
$('#error-message').html('用户名不能为空!');
return;
}
if (!password) {
$('#error-message').html('密码不能为空!');
return;
}
// 发送登录请求
$.post('login.php', {username: username, password: password}, function(data) {
if (data.success) {
// 登录成功,跳转到首页
window.location.href = 'index.php';
} else {
// 登录失败,显示错误信息
$('#error-message').html(data.message);
}
});
});
});
</script>
</body>
</html>
```
在上面的代码中,我们首先使用HTML和CSS创建了一个简单的登录页面。然后使用jQuery监听表单的提交事件,在提交前获取用户名和密码输入框的值,判断是否为空。如果不为空,则使用$.post方法发送登录请求,将用户名和密码传递给服务器端进行验证。如果验证成功,则跳转到首页;如果验证失败,则显示错误信息。需要注意的是,上述代码仅仅是一个简单的示例,实际应用中还需要进行更多的安全处理,例如对密码进行加密等。