C6.28.4Autofill versus live validation timing设计研究

自动填充与输入校验的时机需要协调,避免填充后触发即时报错

别名: 填充触发校验 · 未填完就报错 · 校验过早

概念解释

许多表单在字段 inputchange 时立刻跑校验:邮箱要有 @,电话要满位数。自动填充往往是分格、分帧写入的,第一格刚填完、第二格还空,即时校验就会把“进行中的填充”判成错误,红框和提示抢在用户看清内容之前出现。需要协调的是校验何时跑,不是填得对不对。填充完成前报错,会让人以为档案无效,甚至中断尚未结束的填充。

机制

浏览器填充可能先触发一次 input 再触发 change,多格可能按不确定顺序更新。校验若把每一次 input 都当成“用户已结束”,中间态(只填了区号、邮箱本地部分)全是失败。动画和错误摘要会抢走焦点,密码管理器的下一格填充被打断。有的站点用 input 去发网络检查(邮箱是否已注册),填充会在几毫秒内打出一串请求。正确的挂钩是:单格在失焦或填充批次结束(animationstart 上的 autofill 伪类、或一次微任务里多格都变了)之后再校验;整表在提交时再做一次。

怎么研究

给带即时校验的表单做填充,录下错误提示出现的时间与各格值稳定的时间,看是否存在“提示早于稳定”。比较 input、change、blur、submit 四种挂钩。网络面板看填充是否触发了不该提前发的检查请求。用慢速填充(逐步写入)放大中间态。不要只看最终提交是否成功——中间闪错也会被用户当成故障。

边界

单格、且填充一次写完整个合法值,即时校验碰巧不闪。服务端必须在提交时校验,前端推迟不等于可以不校验。无障碍的即时错误对手动输入仍有价值,策略应按“是否处于填充批次”分支,而不是全局关掉。验证码字段的填充来自短信,时机更短,仍应等值稳定。

怎么落地

  • 填充过程中抑制逐键校验,等 blur 或检测到填充批次结束再跑。
  • 不要在 input 上发“是否已注册”一类请求。
  • 错误提示出现时若值仍在变,清掉提示直到稳定。
  • 验证:打开开发者工具慢速,触发填充,错误红框不得在所有目标格写完之前出现;提交时再故意留一个真错误,确认校验仍会报。

延伸

  • 同组C6.28.1 自动填充依赖字段的语义标注,标注缺失或错误会填错内容 · C6.28.2 自动填充的内容在提交前应保持可编辑,不能强制锁定 · C6.28.3 自动填充可能跨域填入不匹配的历史数据,带来隐私与出错风险
  • 相邻C6.24 自动大写与格式化 · C6.10 自动补全
  • 站内检索autofill validation · input event timing · premature errors

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.28.4