User Login UI - 用户登录页面

一个基于纯 HTML、CSS 和 JavaScript 构建的独立用户登录页面。提供清晰的表单布局、客户端验证、错误提示和专业的视觉设计。

功能介绍

• 表单验证：对用户名和密码字段进行实时客户端验证
• 错误提示：字段级错误信息和全局错误提示
• 加载状态：表单提交时显示视觉反馈
• 模拟登录：演示成功和错误两种场景
• 无障碍支持：正确的 ARIA 标签、键盘导航、焦点管理
• 响应式设计：支持 320px 到 1440px 宽度的屏幕
• 零依赖：纯原生技术栈，无需任何外部库

快速开始

方式一：直接打开

在浏览器中直接打开 login/index.html 文件：

# macOS
open login/index.html

# Windows
start login\index.html

# Linux
xdg-open login/index.html

方式二：本地服务器（推荐）

# 使用 npx serve
npx serve .

# 然后访问 http://localhost:3000/login/index.html

验证规则

字段	验证规则	错误提示
用户名	必填，最少 3 个字符，仅限字母、数字和下划线	"用户名是必填项" / "用户名至少需要 3 个字符，仅允许字母、数字和下划线"
密码	必填，最少 6 个字符	"密码是必填项" / "密码至少需要 6 个字符"

验证触发时机

• 验证在表单提交时触发
• 错误会在用户开始修改输入时自动清除（监听 input 事件）

提交行为

1. 点击登录按钮或按 Enter 键提交表单
2. 按钮显示加载状态（禁用状态）
3. 1.5 秒后模拟请求完成，随机显示：
   • 成功："登录成功！"（绿色提示）
   • 失败："用户名或密码错误"（红色错误）

注意：登录结果是随机演示（50% 成功率），实际项目中此处应连接后端 API。

浏览器支持

• Chrome（最新 2 个版本）
• Firefox（最新 2 个版本）
• Safari（最新 2 个版本）
• Edge（最新 2 个版本）

项目结构

spec-kit-test/
├── login/
│   ├── index.html    # 页面结构
│   ├── style.css     # 样式表
│   └── script.js     # 验证逻辑和交互
├── spec.md           # 功能规格说明
├── README.md         # 项目说明（本文档）
└── USAGE.md          # 详细使用指南

技术说明

• 无后端集成：纯前端实现，无服务器端逻辑
• 无外部依赖：不引用任何 CDN 或第三方库
• 表单属性：使用 novalidate 禁用浏览器默认验证
• 辅助功能：符合 WCAG 无障碍指南基本要求

相关文档

• 功能规格 - 详细的功能需求说明
• 使用指南 - 详细使用方法、测试技巧和自定义指南