React表单中仅在输入框失焦时执行校验的弊端是什么？

如果仅在失焦时校验，那么当用户此前输入了无效内容，返回修改内容的过程中，你无法在用户完成输入前告知其当前内容是否已经有效，这种场景下按键触发校验的效果会更好。

仅使用失焦校验的方案存在多个影响用户体验和表单可用性的问题：

• 编辑场景下反馈严重滞后：如果用户第一次输入内容不符合规则、看到错误提示后返回修改，从修改到内容符合规则的整个过程中，用户无法实时感知自己的操作是否正确，很多时候甚至已经改对了，也要等点击输入框外的区域才知道错误已经修复，容易出现用户反复修改不必要内容的情况。
• 降低长表单填写效率：对于字段较多的表单，用户通常会按顺序连续填写，如果每填完一个字段都要等失焦才知道是否符合要求，一旦出现错误需要来回切换字段修改，会大幅拉长填写时间；对于有格式要求的字段（比如密码、手机号、邮箱），用户无法在输入过程中实时对照规则调整内容，容易出现输入完成后才发现完全不符合要求的情况。
• 容易触发提交异常：很多用户填写完最后一个表单字段后会直接点击提交按钮，此时最后一个输入框没有触发失焦事件，对应的校验逻辑不会执行，很可能会把不符合规则的内容直接提交到后端，反而会带来更差的报错体验。

实际开发中可以两种模式结合平衡体验：第一次校验默认用失焦触发，避免用户刚输入第一个字符就弹出错误提示造成打扰，一旦用户已经触发过错误提示，后续修改就切换为实时按键校验即可。

内容的提问来源于stack exchange，提问作者rajgopalbh4