# 表单验证测试指南

## 测试概述

本文档提供了完整的表单验证功能测试步骤，确保所有验证规则和用户交互都能正常工作。

## 测试环境准备

### 1. 启动后端服务
```bash
# 确保后端服务运行在 https://whaletownend.xinghangee.icu
# 或者本地开发环境: http://localhost:3000
npm start
# 或者你的后端启动命令
```

### 2. 打开Godot项目
- 启动Godot编辑器
- 打开鲸鱼镇项目
- 运行主场景

## 登录表单测试

### 测试用例1: 必填项验证

#### 步骤
1. 点击"注册居民身份"进入登录界面
2. 不输入任何内容，直接点击用户名输入框外的区域
3. 不输入任何内容，直接点击密码输入框外的区域
4. 点击"进入小镇"或"密码登录"按钮

#### 预期结果
- 用户名输入框下方显示红色错误提示："用户名不能为空"
- 密码输入框下方显示红色错误提示："密码不能为空"
- 按钮点击无效，不会提交表单

### 测试用例2: 实时反馈

#### 步骤
1. 触发上述错误提示后
2. 在用户名输入框中输入任意字符
3. 在密码输入框中输入任意字符

#### 预期结果
- 开始输入时，对应的错误提示立即消失
- 提供即时的视觉反馈

### 测试用例3: 正常登录

#### 步骤
1. 输入有效的用户名："testuser"
2. 输入任意密码："password123"
3. 点击"进入小镇"

#### 预期结果
- 无错误提示显示
- 成功进入游戏主界面
- 显示用户名信息

## 注册表单测试

### 测试用例4: 用户名验证

#### 测试数据
| 输入 | 预期结果 | 错误信息 |
|------|----------|----------|
| (空) | 失败 | "用户名不能为空" |
| "test@user" | 失败 | "用户名只能包含字母、数字和下划线" |
| "a".repeat(51) | 失败 | "用户名长度应为1-50字符" |
| "test_user123" | 成功 | 无错误提示 |

#### 步骤
1. 点击"注册居民身份"
2. 依次输入上述测试数据
3. 每次输入后点击其他输入框（触发失焦验证）

### 测试用例5: 邮箱验证

#### 测试数据
| 输入 | 预期结果 | 错误信息 |
|------|----------|----------|
| (空) | 失败 | "邮箱不能为空" |
| "invalid-email" | 失败 | "请输入有效的邮箱地址" |
| "test@" | 失败 | "请输入有效的邮箱地址" |
| "test@example.com" | 成功 | 无错误提示 |

#### 步骤
1. 在邮箱输入框中依次输入测试数据
2. 每次输入后点击其他输入框

### 测试用例6: 密码验证

#### 测试数据
| 输入 | 预期结果 | 错误信息 |
|------|----------|----------|
| (空) | 失败 | "密码不能为空" |
| "1234567" | 失败 | "密码长度至少8位" |
| "12345678" | 失败 | "密码必须包含字母和数字" |
| "abcdefgh" | 失败 | "密码必须包含字母和数字" |
| "abc12345" | 成功 | 无错误提示 |

#### 步骤
1. 在密码输入框中依次输入测试数据
2. 每次输入后点击其他输入框

### 测试用例7: 确认密码验证

#### 步骤
1. 在密码框输入："abc12345"
2. 在确认密码框输入：""（空）
3. 点击其他输入框
4. 在确认密码框输入："different123"
5. 点击其他输入框
6. 在确认密码框输入："abc12345"
7. 点击其他输入框

#### 预期结果
- 步骤3: 显示"确认密码不能为空"
- 步骤5: 显示"两次输入的密码不一致"
- 步骤7: 无错误提示

### 测试用例8: 验证码功能

#### 步骤
1. 不输入邮箱，直接点击"发送验证码"
2. 输入无效邮箱"invalid"，点击"发送验证码"
3. 输入有效邮箱"test@example.com"，点击"发送验证码"
4. 立即再次点击"发送验证码"
5. 在验证码输入框输入"12345"（5位）
6. 在验证码输入框输入"12345a"（包含字母）
7. 在验证码输入框输入"123456"（正确格式）

#### 预期结果
- 步骤1: 邮箱框显示"邮箱不能为空"，聚焦到邮箱输入框
- 步骤2: 邮箱框显示"请输入有效的邮箱地址"
- 步骤3: 显示"正在发送验证码..."，按钮变为禁用状态
- 步骤4: 显示冷却提示"请等待 XX 秒后再次发送"
- 步骤5: 验证码框显示"验证码必须是6位数字"
- 步骤6: 验证码框显示"验证码必须是6位数字"
- 步骤7: 无错误提示

### 测试用例9: 完整注册流程

#### 步骤
1. 填写所有必填信息：
   - 用户名: "testuser"
   - 邮箱: "test@example.com"
   - 密码: "password123"
   - 确认密码: "password123"
2. 点击"发送验证码"
3. 查看控制台获取验证码
4. 输入验证码
5. 点击"注册"按钮

#### 预期结果
- 所有验证通过，无错误提示
- 显示"正在验证邮箱..."
- 显示"邮箱验证成功，正在注册..."
- 显示"注册成功！"
- 自动返回登录界面
- 用户名自动填入登录表单

## 边界情况测试

### 测试用例10: 网络异常

#### 步骤
1. 关闭后端服务
2. 尝试发送验证码
3. 尝试注册

#### 预期结果
- 显示"网络连接失败，请检查服务器是否启动"
- 按钮重新启用

### 测试用例11: 快速操作

#### 步骤
1. 快速连续点击"发送验证码"按钮
2. 快速连续点击"注册"按钮

#### 预期结果
- 按钮在请求期间被禁用
- 防止重复提交

### 测试用例12: 表单切换

#### 步骤
1. 在注册表单中输入信息并触发错误提示
2. 点击"返回登录"
3. 再次点击"注册居民身份"

#### 预期结果
- 切换到登录界面时，注册表单状态保持
- 再次进入注册界面时，表单被清空，错误提示被隐藏

## 性能测试

### 测试用例13: 响应速度

#### 步骤
1. 快速在各个输入框之间切换
2. 快速输入和删除文本
3. 观察错误提示的显示和隐藏速度

#### 预期结果
- 验证响应迅速，无明显延迟
- UI更新流畅，无卡顿现象

## 兼容性测试

### 测试用例14: 不同输入法

#### 步骤
1. 使用中文输入法输入用户名
2. 使用英文输入法输入用户名
3. 输入特殊字符

#### 预期结果
- 中文字符被正确验证为无效格式
- 英文字符正常通过验证
- 特殊字符按规则验证

## 测试检查清单

### 功能完整性
- [ ] 所有必填项都有红色星号标识
- [ ] 失焦验证正常工作
- [ ] 实时输入反馈正常
- [ ] 错误提示准确显示
- [ ] 验证码发送和验证功能正常
- [ ] 注册流程完整可用

### 用户体验
- [ ] 错误提示清晰易懂
- [ ] 按钮状态管理正确
- [ ] 表单切换流畅
- [ ] 成功反馈及时

### 错误处理
- [ ] 网络异常处理正确
- [ ] 服务器错误处理正确
- [ ] 边界情况处理正确

### 性能表现
- [ ] 验证响应速度快
- [ ] UI更新流畅
- [ ] 内存使用正常

## 测试报告模板

### 测试环境
- Godot版本: 
- 操作系统: 
- 后端服务状态: 
- 测试时间: 

### 测试结果
| 测试用例 | 状态 | 备注 |
|----------|------|------|
| 登录表单验证 | ✅/❌ | |
| 注册表单验证 | ✅/❌ | |
| 验证码功能 | ✅/❌ | |
| 网络异常处理 | ✅/❌ | |
| 完整注册流程 | ✅/❌ | |

### 发现的问题
1. 问题描述
   - 重现步骤
   - 预期结果
   - 实际结果
   - 严重程度

### 改进建议
1. 功能改进
2. 用户体验优化
3. 性能优化

---

**测试完成日期**: ___________  
**测试人员**: ___________  
**测试版本**: v1.0.0