H1.04.2validation on blur设计研究

失焦后校验是较稳妥的时机

别名: 失焦校验 · on blur · validate on exit · field-level validation

概念解释

失焦校验在字段失去焦点时跑规则:人按 Tab、点下一字段、或点到字段外的空白,等于宣布「这项我填完了」。此时才显示格式或必填错误,中间态不会被当成终态。它比逐键报错稳,也比只在整表提交时才说话更早。这条谈的是「何时做第一次判定」,不解释逐键为什么伤人,也不规定已经变红的字段在改正过程中要不要立刻熄火。提交失败后焦点去哪、顶部清单一不算不算数,是定位与汇总,不是失焦本身。

机制

焦点离开是人给出的完成信号。校验器这时面对的接近终态:邮箱该有 @,日期该是一整段。把判定绑在这个信号上,错误针对的是人以为已经交出去的值,而不是正在敲的前缀。第二层是节奏:填表是「写 → 换项 → 写」。失焦校验把反馈插入换项这一拍,不插入击键这一拍,运动程序得以完整。只在提交时校验则把所有错误堆到终点,人要沿整张表回溯。失焦的稳妥来自「完成信号 × 就地反馈」,不是来自失焦这个 DOM 事件本身——若系统在自动补全结束前抢跑失焦,或移动端「下一步」并不触发 web 的 blur,这个信号就没发出去。

怎么研究

比较三种第一次报错时机:逐键、失焦、仅提交。字段集合里要包含会跨项粘贴的值(从密码管理器填入邮箱再 Tab)。

自变量:第一次错误的触发事件(input / blur / submit)、移动端是否用「下一步」而不是 blur、自动填充是否在校验前完成。 因变量:该项上的无效中间态错误次数、从错误出现到改正的时间、提交时仍未看过的错误数、误报(值尚未完成就被判错)次数。

实验室用鼠标点下一字段,blur 很干净;触屏和键盘用户的离开路径不同,必须分开测。不要把「失焦组完成更快」直接归因于时机——若该组同时还改了文案位置,变量缠在一起。

边界

最后一项常常用回车或主按钮提交,焦点可能从未离开该字段,失焦校验一次都不会跑;提交校验必须作为兜底,否则最后一项是盲区。自定义下拉、日期面板在选择过程中可能反复 blur/focus,把选择动作打成多次「完成」。禁用 JavaScript 或校验全在服务端的表单没有失焦这层。跨字段约束(两次密码、起止日期)不能在第一次失焦时定论,因为另一半还不存在。

怎么落地

  • 把字段级格式与必填的第一次提示绑在真正的完成信号上:blur、移动端工具栏的「下一步」、或选择器确认,而不是每个字符。
  • 整表提交时再跑一遍同样的规则,覆盖从未失焦的最后一项和脚本没能收到 blur 的控件。
  • 对会在面板内多次失焦的日期、下拉,等到面板关闭或选项确认后再判,不要在打开面板的瞬间报「必填」。
  • 验证:只填到最后一项就点提交,确认最后一项的错误仍出现。再用键盘 Tab 走过邮箱,确认错误出现在离开之后而不是第一个字符。在真机键盘工具栏按「下一项」,确认校验有跑。自动填充整段邮箱后,错误不得在值写完前闪一次。

延伸

  • 同组H1.04.1 输入过程中校验会在未完成时报错 · H1.04.3 已报错字段应在修正时立即解除
  • 相邻H1.06 错误汇总 · E2.22 自动聚焦与焦点抢夺 · H1.11 表单的键盘体验
  • 站内检索validation on blur · field-level validation · complete signal

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/H1.04.2