表单
规则
- 使用 React Hook Form 管理表单状态 —
useForm()+register()或 Controller - 使用 Zod schema 进行校验 — 在客户端和服务器之间共享
- 错误显示:在每个字段下方内联显示,红色文字,通过
aria-describedby关联 - 多步骤表单:采用向导模式,包含步骤状态,每个步骤独立校验
- 文件上传:独立组件,包含预览、拖拽上传、进度指示器
- 长表单的自动保存 — 防抖保存至服务器/localStorage
- 无障碍支持:标签、错误描述、校验失败时的焦点管理
- 加载时禁用提交按钮 — 显示旋转指示器,防止重复提交