内容：自行搭建前端页面并分析
运行成功界面：
代码：
<!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" requiredautocomplete="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" requiredautocomplete="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>
