很多表单错误处理的问题,不在于没有提示,而在于提示方式和错误类型不匹配。
例如:
- 字段格式错了,却只弹一个全局 toast
- 服务端失败了,却把错误挂在单个 input 上
- 提交失败后数据被清空,用户得重填一遍
所以错误处理不是“加一句报错文案”,而是给不同错误匹配不同处理模式。建议同时阅读 前端错误处理与日志系统、Vue 落地页表单最佳实践、复杂表单逻辑指南 和 单元测试最佳实践。
先给结论:先分清错误类型,再决定提示位置
表单错误至少分为四类:
- 格式错误
- 业务规则错误
- 系统错误
- 提交后状态错误
不同错误应该使用不同提示方式,而不是全部塞进同一种 UI 模式。
一、格式错误:最适合内联提示
这类错误包括:
- 邮箱格式不对
- 手机号位数错误
- 必填项为空
这类错误的特点是:
- 与单个字段直接相关
- 用户可以立刻修改
所以最适合用字段旁的内联提示,并尽量在输入或失焦时就给出反馈。
二、业务规则错误:需要解释原因,而不只是标红
例如:
- 优惠码已过期
- 预约时间不可选
- 当前账号无权提交某类申请
这类错误虽然也可能落在某个字段上,但它本质上是业务限制。提示时要说清“为什么不能这样做”,而不是只提示“无效输入”。
三、系统错误:不要伪装成字段错误
接口超时、网络断开、服务端异常,这些都不是用户输入问题。
如果你把这类错误挂在输入框旁边,用户会以为是自己填错了。
更合适的方式通常是:
- 表单级错误提示
- 明确告诉用户可以重试
- 保留已输入内容
四、提交后状态错误:关键是恢复,而不是提示得多漂亮
提交后状态错误常见于:
- 按钮 loading 卡死
- 提交成功但页面没反馈
- 二次点击导致重复提交
这类问题比普通字段错误更影响业务,因为它直接关系到用户是否认为“我刚才到底提交成功没有”。
所以这里的关键是:
- 状态明确
- 重试路径明确
- 重复提交被保护
五、什么时候要用错误摘要
当表单较长、字段较多时,单纯依靠内联提示不够,因为用户未必知道页面上方或下方还有哪些问题。
这时可以在表单顶部加入错误摘要区,告诉用户:
- 目前有几项需要修正
- 主要问题是什么
- 是否可以点击跳到对应字段
但要注意:摘要不能替代字段级提示,二者应该配合使用。
六、错误体验也要进入日志系统
很多团队只看提交成功率,却不看错误率和错误分布。
你至少应该记录:
- 哪个字段最常报错
- 哪类错误最常导致放弃提交
- 哪个接口最常失败
这些数据会直接告诉你:问题到底是用户不会填,还是系统设计有问题。
一个失败案例:提示很多,但用户还是不知道怎么改
典型原因是:
- 所有错误都统一显示成红字
- 文案模糊,只写“输入有误”
- 服务端失败也没有与本地状态区分
- 用户修正后仍然不知道是否成功
这说明错误处理的重点从来不是“有没有提示”,而是提示是否贴合错误类型。
表单错误处理检查清单
- 是否按格式、业务、系统、状态四类区分错误
- 格式错误是否使用内联提示并尽早反馈
- 系统错误是否使用表单级提示并保留数据
- 长表单是否提供错误摘要
- 是否防止重复提交与状态卡死
- 是否记录并分析错误分布数据


