表单状态、校验与提交流程
表单状态、校验与提交流程
这篇笔记还在编辑中,内容可能会继续补充、调整或重写。
表单是一个状态机
真实表单不仅有字段值,还包含初始值、脏状态、访问状态、同步错误、服务端错误、提交中、成功和重试等状态。先定义状态与转换,再决定使用原生表单、框架状态还是表单库。
优先保留平台语义
使用 <form>、<label>、正确的输入类型和提交按钮,可以获得键盘提交、自动填充、移动键盘、浏览器校验和辅助技术支持。不要为了统一视觉把按钮换成不可聚焦的 div,也不要阻止所有原生行为后重新实现不完整版本。
两层校验
客户端校验提供即时反馈,但不能建立安全边界;服务端必须重新验证所有不可信输入。两端应共享契约或生成规则,同时允许服务端返回客户端无法预知的业务错误。
错误信息需要:
- 与具体字段或表单级区域关联
- 说明如何修复,而不只是“输入无效”
- 在提交后将焦点或摘要引导到首个错误
- 不仅依赖颜色表达
- 支持动态内容的可访问通知
异步与并发
用户名检查、地址搜索等异步校验需要防抖、取消和结果版本控制,避免慢响应覆盖新输入。提交按钮可以防止重复点击,但服务端仍需幂等策略;网络超时不代表服务端一定没有成功。
草稿与隐私
长表单可以保存草稿,但要明确保存位置、有效期、版本迁移和清除入口。密码、支付信息和敏感身份数据不应默认写入长期客户端存储。
实践任务
为任务编辑表单实现:
- 同步字段校验和服务端业务校验
- 可取消的异步名称检查
- 重复提交保护与幂等键
- 刷新前草稿恢复和 Schema 版本迁移
- 键盘与读屏可完成的错误修复流程
验收标准
- Enter 提交、标签和自动填充保持原生语义
- 客户端与服务端错误能映射到正确位置
- 过期异步结果不会覆盖当前输入
- 重试不会无意创建重复数据
- 草稿具有版本、过期和清除策略
- 键盘和辅助技术用户能发现并修复错误