1
用 React 18 + TypeScript + React Hook Form 写一个用户注册表单组件。
2
- 字段清单：
3
- 用户名：必填，2-10 个字符，只能包含字母数字下划线
4
- 邮箱：必填，标准邮箱格式
5
- 密码：必填，8-20 位，至少包含一个大写、一个小写、一个数字
6
- 确认密码：必填，必须和密码字段一致
7
- 手机号：选填，11 位数字，1 开头
8

9
验证行为：
10
- 每个字段失焦时触发校验，不要边打字边校验
11
- 错误提示红色小字，显示在对应输入框正下方
12
- 密码强度用三段式进度条展示（弱/中/强）
13
- 确认密码字段只在密码字段有值后才启用
14

15
提交逻辑：
16
- 任一必填字段未通过校验时，提交按钮 disabled 且置灰
17
- 点击提交后按钮变成 loading 状态，显示"提交中..."
18
- 请求完成前禁止重复点击
19
- 成功后调用 onSuccess 回调并清空表单，失败后保留已填内容
20

21
代码要求：
22
- 用函数组件 + hooks，不用 class 组件
23
- 类型定义单独放一个 types.ts 文件
24
- 验证规则用 zod schema 定义，不要散落在组件里
25
- 错误信息统一放 constants.ts，支持国际化替换
26
- 样式用 Tailwind CSS，响应式适配移动端
27
- 关键逻辑加注释，特别是正则表达式要写清楚匹配什么
28

29
输出格式：
30
- RegisterForm.tsx（主组件）
31
- types.ts（类型定义）
32
- schema.ts（zod 验证规则）
33
- constants.ts（错误信息常量）
34
- 最后给一个使用示例

1
用 React 18 + TypeScript + React Hook Form 写一个用户注册表单组件。
2
- 字段清单：
3
- 用户名：必填，2-10 个字符，只能包含字母数字下划线
4
- 邮箱：必填，标准邮箱格式
5
- 密码：必填，8-20 位，至少包含一个大写、一个小写、一个数字
6
- 确认密码：必填，必须和密码字段一致
7
- 手机号：选填，11 位数字，1 开头
8

9
验证行为：
10
- 每个字段失焦时触发校验，不要边打字边校验
11
- 错误提示红色小字，显示在对应输入框正下方
12
- 密码强度用三段式进度条展示（弱/中/强）
13
- 确认密码字段只在密码字段有值后才启用
14

15
提交逻辑：
16
- 任一必填字段未通过校验时，提交按钮 disabled 且置灰
17
- 点击提交后按钮变成 loading 状态，显示"提交中..."
18
- 请求完成前禁止重复点击
19
- 成功后调用 onSuccess 回调并清空表单，失败后保留已填内容
20

21
代码要求：
22
- 用函数组件 + hooks，不用 class 组件
23
- 类型定义单独放一个 types.ts 文件
24
- 验证规则用 zod schema 定义，不要散落在组件里
25
- 错误信息统一放 constants.ts，支持国际化替换
26
- 样式用 Tailwind CSS，响应式适配移动端
27
- 关键逻辑加注释，特别是正则表达式要写清楚匹配什么
28

29
输出格式：
30
- RegisterForm.tsx（主组件）
31
- types.ts（类型定义）
32
- schema.ts（zod 验证规则）
33
- constants.ts（错误信息常量）
34
- 最后给一个使用示例