jquery登录界面
jQuery 登录界面实现
使用 jQuery 可以快速构建一个交互式的登录界面。以下是一个完整的实现方案，包括 HTML 结构、CSS 样式和 jQuery 交互逻辑。
HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery 登录界面</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="login-container">
<h2>用户登录</h2>
<form id="loginForm">
<div class="form-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<span class="error-message" id="usernameError"></span>
</div>
<div class="form-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<span class="error-message" id="passwordError"></span>
</div>
<button type="submit" id="loginBtn">登录</button>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS 样式
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.login-container {
background: #fff;
padding: 20px 30px;
border-radius: 8px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 300px;
}
h2 {
margin-bottom: 20px;
color: #333;
text-align: center;
}
.form-group {
margin-bottom: 15px;
}
label {
display: block;
margin-bottom: 5px;
color: #555;
}
input {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background-color: #0056b3;
}
.error-message {
color: red;
font-size: 12px;
display: block;
margin-top: 5px;
}jQuery 交互逻辑
$(document).ready(function() {
$('#loginForm').submit(function(e) {
e.preventDefault();
let username = $('#username').val().trim();
let password = $('#password').val().trim();
let isValid = true;
$('#usernameError').text('');
$('#passwordError').text('');
if (username === '') {
$('#usernameError').text('用户名不能为空');
isValid = false;
}
if (password === '') {
$('#passwordError').text('密码不能为空');
isValid = false;
} else if (password.length < 6) {
$('#passwordError').text('密码长度不能少于6位');
isValid = false;
}
if (isValid) {
$('#loginBtn').text('登录中...').prop('disabled', true);
// 模拟AJAX请求
setTimeout(function() {
alert('登录成功！');
$('#loginBtn').text('登录').prop('disabled', false);
// 实际应用中这里应该是真实的AJAX请求
// $.ajax({
// url: 'login.php',
// method: 'POST',
// data: {username: username, password: password},
// success: function(response) {
// // 处理登录成功逻辑
// },
// error: function() {
// // 处理错误
// }
// });
}, 1000);
}
});
});功能扩展
添加记住密码功能
<div class="form-group">
<input type="checkbox" id="remember" name="remember">
<label for="remember" style="display: inline;">记住密码</label>
</div>添加jQuery本地存储功能
// 页面加载时检查是否有保存的登录信息
if (localStorage.getItem('remember') === 'true') {
$('#username').val(localStorage.getItem('username'));
$('#password').val(localStorage.getItem('password'));
$('#remember').prop('checked', true);
}
// 登录时保存信息
if ($('#remember').is(':checked')) {
localStorage.setItem('username', username);
localStorage.setItem('password', password);
localStorage.setItem('remember', true);
} else {
localStorage.removeItem('username');
localStorage.removeItem('password');
localStorage.setItem('remember', false);
}响应式设计改进
@media (max-width: 480px) {
.login-container {
width: 90%;
padding: 15px;
}
h2 {
font-size: 1.5em;
}
}这个实现提供了基本的登录功能，包括表单验证、错误提示和模拟登录过程。可以根据实际需求进一步扩展，如添加密码强度检查、验证码功能或与后端API的集成。
