内容：自行搭建前端页面并分析
运行成功界面：
代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="用户登录页面">
<title>用户登录 | 系统名称</title>
<style>
/* 全局样式重置与基础设置 */
:root {
--primary-color: #1a73e8;
--primary-hover: #1557b0;
--error-color: #d93025;
--text-color: #5f6368;
--border-color: #dadce0;
--bg-color: #f0f2f5;
--transition-time: 0.3s;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background-color: var(--bg-color);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
line-height: 1.6;
color: var(--text-color);
}
/* 登录容器样式 */
.login-container {
background-color: white;
padding: 2.5rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
width: 100%;
max-width: 420px;
margin: 1rem;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
/* 标题样式 */
.login-title {
text-align: center;
margin-bottom: 1.8rem;
color: var(--primary-color);
font-size: 1.8rem;
font-weight: 600;
}
/* 表单组样式 */
.form-group {
margin-bottom: 1.2rem;
position: relative;
}
label {
display: block;
margin-bottom: 0.6rem;
color: var(--text-color);
font-weight: 500;
font-size: 0.95rem;
}
/* 输入框样式 */
input {
width: 100%;
padding: 0.9rem;
border: 1px solid var(--border-color);
border-radius: 6px;
font-size: 1rem;
transition: all var(--transition-time) ease;
}
input:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.15);
}
/* 密码输入框额外样式 */
.password-container {
position: relative;
}
.toggle-password {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: var(--text-color);
cursor: pointer;
font-size: 0.9rem;
padding: 0.5rem;
}
/* 按钮样式 */
.login-btn {
width: 100%;
padding: 0.9rem;
background-color: var(--primary-color);
color: white;
border: none;
border-radius: 6px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background-color var(--transition-time);
margin-top: 0.5rem;
}
.login-btn:hover {
background-color: var(--primary-hover);
}
.login-btn:disabled {
background-color: #cccccc;
cursor: not-allowed;
}
/* 错误消息样式 */
.error-message {
color: var(--error-color);
font-size: 0.8rem;
margin-top: 0.4rem;
display: none;
animation: shake 0.3s ease;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
20%, 60% { transform: translateX(-3px); }
40%, 80% { transform: translateX(3px); }
}
/* 额外链接样式 */
.form-footer {
margin-top: 1.5rem;
text-align: center;
font-size: 0.9rem;
}
.form-footer a {
color: var(--primary-color);
text-decoration: none;
transition: color var(--transition-time);
}
.form-footer a:hover {
color: var(--primary-hover);
text-decoration: underline;
}
/* 响应式调整 */
@media (max-width: 480px) {
.login-container {
padding: 1.8rem;
}
.login-title {
font-size: 1.5rem;
}
}
</style>
</head>
<body>
<div class="login-container">
<h1 class="login-title">用户登录</h1>
<form id="loginForm" novalidate>
<div class="form-group">
<label for="username">用户名</label>
<input
type="text"
id="username"
name="username"
required
autocomplete="username"
aria-describedby="usernameError"
>
<div class="error-message" id="usernameError" role="alert">请输入有效的用户名</div>
</div>
<div class="form-group">
<label for="password">密码</label>
<div class="password-container">
<input
type="password"
id="password"
name="password"
required
autocomplete="current-password"
aria-describedby="passwordError"
>
<button type="button" class="toggle-password" aria-label="显示密码">👁️</button>
</div>
<div class="error-message" id="passwordError" role="alert">请输入密码</div>
</div>
<button type="submit" class="login-btn" id="submitBtn">登录</button>
<div class="form-footer">
<a href="#" id="forgotPassword">忘记密码?</a>
<span> | </span>
<a href="#" id="register">注册账号</a>
</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const loginForm = document.getElementById('loginForm');
const usernameInput = document.getElementById('username');
const passwordInput = document.getElementById('password');
const submitBtn = document.getElementById('submitBtn');
const togglePasswordBtn = document.querySelector('.toggle-password');
// 显示/隐藏密码
togglePasswordBtn.addEventListener('click', function() {
const type = passwordInput.getAttribute('type') === 'password' ? 'text' : 'password';
passwordInput.setAttribute('type', type);
this.textContent = type === 'password' ? '👁️' : '👁️🗨️';
});
// 实时验证
usernameInput.addEventListener('input', validateUsername);
passwordInput.addEventListener('input', validatePassword);
function validateUsername() {
const username = usernameInput.value.trim();
const errorElement = document.getElementById('usernameError');
if (username === '') {
showError(usernameInput, errorElement, '请输入用户名');
return false;
}
if (username.length < 4) {
showError(usernameInput, errorElement, '用户名至少需要4个字符');
return false;
}
hideError(usernameInput, errorElement);
return true;
}
function validatePassword() {
const password = passwordInput.value.trim();
const errorElement = document.getElementById('passwordError');
if (password === '') {
showError(passwordInput, errorElement, '请输入密码');
return false;
}
if (password.length < 6) {
showError(passwordInput, errorElement, '密码至少需要6个字符');
return false;
}
hideError(passwordInput, errorElement);
return true;
}
function showError(inputElement, errorElement, message) {
errorElement.textContent = message;
errorElement.style.display = 'block';
inputElement.style.borderColor = 'var(--error-color)';
submitBtn.disabled = true;
}
function hideError(inputElement, errorElement) {
errorElement.style.display = 'none';
inputElement.style.borderColor = 'var(--border-color)';
// 只有两个验证都通过才启用按钮
if (validateUsername() && validatePassword()) {
submitBtn.disabled = false;
}
}
// 表单提交
loginForm.addEventListener('submit', async function(e) {
e.preventDefault();
// 再次验证
const isUsernameValid = validateUsername();
const isPasswordValid = validatePassword();
if (!isUsernameValid || !isPasswordValid) {
return;
}
// 禁用按钮防止重复提交
submitBtn.disabled = true;
submitBtn.textContent = '登录中...';
try {
// 模拟API请求延迟
await new Promise(resolve => setTimeout(resolve, 1500));
// 这里应该是实际的API请求
// const response = await fetch('/api/login', {
// method: 'POST',
// headers: {
// 'Content-Type': 'application/json'
// },
// body: JSON.stringify({
// username: usernameInput.value.trim(),
// password: passwordInput.value.trim()
// })
// });
// if (!response.ok) {
// throw new Error('登录失败');
// }
// 模拟成功响应
alert('登录成功！即将跳转到首页...');
// window.location.href = '/dashboard';
} catch (error) {
const errorElement = document.getElementById('passwordError');
showError(passwordInput, errorElement, '用户名或密码错误');
console.error(' 登录错误:', error);
} finally {
submitBtn.disabled = false;
submitBtn.textContent = '登录';
}
});
// 忘记密码和注册链接
document.getElementById('forgotPassword').addEventListener('click', function(e) {
e.preventDefault();
alert('忘记密码功能即将开放');
});
document.getElementById('register').addEventListener('click', function(e) {
e.preventDefault();
alert('注册功能即将开放');
});
});
</script>
</body>
</html>