C6.28.4Autofill versus live validation timing设计研究
自动填充与输入校验的时机需要协调,避免填充后触发即时报错
别名: 填充触发校验 · 未填完就报错 · 校验过早
概念解释
许多表单在字段 input 或 change 时立刻跑校验:邮箱要有 @,电话要满位数。自动填充往往是分格、分帧写入的,第一格刚填完、第二格还空,即时校验就会把“进行中的填充”判成错误,红框和提示抢在用户看清内容之前出现。需要协调的是校验何时跑,不是填得对不对。填充完成前报错,会让人以为档案无效,甚至中断尚未结束的填充。
机制
浏览器填充可能先触发一次 input 再触发 change,多格可能按不确定顺序更新。校验若把每一次 input 都当成“用户已结束”,中间态(只填了区号、邮箱本地部分)全是失败。动画和错误摘要会抢走焦点,密码管理器的下一格填充被打断。有的站点用 input 去发网络检查(邮箱是否已注册),填充会在几毫秒内打出一串请求。正确的挂钩是:单格在失焦或填充批次结束(animationstart 上的 autofill 伪类、或一次微任务里多格都变了)之后再校验;整表在提交时再做一次。
怎么研究
给带即时校验的表单做填充,录下错误提示出现的时间与各格值稳定的时间,看是否存在“提示早于稳定”。比较 input、change、blur、submit 四种挂钩。网络面板看填充是否触发了不该提前发的检查请求。用慢速填充(逐步写入)放大中间态。不要只看最终提交是否成功——中间闪错也会被用户当成故障。
边界
单格、且填充一次写完整个合法值,即时校验碰巧不闪。服务端必须在提交时校验,前端推迟不等于可以不校验。无障碍的即时错误对手动输入仍有价值,策略应按“是否处于填充批次”分支,而不是全局关掉。验证码字段的填充来自短信,时机更短,仍应等值稳定。
怎么落地
- 填充过程中抑制逐键校验,等 blur 或检测到填充批次结束再跑。
- 不要在
input上发“是否已注册”一类请求。 - 错误提示出现时若值仍在变,清掉提示直到稳定。
- 验证:打开开发者工具慢速,触发填充,错误红框不得在所有目标格写完之前出现;提交时再故意留一个真错误,确认校验仍会报。