表单事件处理需紧扣生命周期：input（实时校验/格式化，需防抖）、change（失焦后完整值校验）、blur（离开即校验）、submit（唯一合法入口，须preventDefault并防重提）、reset；校验分字段级（input/blur+setCustomValidity）与业务级（异步+loading）；提交前用锁变量+按钮状态同步保障健壮性；支持localStorage草稿持久化；submit事件优于onclick，确保可访问性与多触发方式兼容。
表单事件处理不是考你会不会写 onsubmit，而是看你是否理解用户交互的真实链条：输入、校验、反馈、提交、防错。面试官想确认你写的不是“能跑就行”的代码，而是健壮、可维护、符合用户预期的逻辑。
紧扣表单生命周期来组织回答
别一上来就贴代码。先说清楚表单从用户开始输入到最终提交，关键节点有哪些：input/change、blur、submit、reset，以及它们各自的语义和适用场景。
- input：实时监听，适合做即时校验（如密码强度提示）、格式化（如手机号自动加空格），但注意防抖，避免高频触发影响性能
- change：值真正改变且失焦后才触发，适合做依赖完整输入的校验（如邮箱格式、下拉选择后联动）
- blur：用户离开当前字段时触发，常用于“离开即校验”，比 change 更及时，又比 input 更轻量
-
submit：唯一合法的提交入口，必须用
event.preventDefault()阻止默认跳转，并集中做最终校验和请求发送
手写防重复提交是高频考点
很多候选人只记得禁用按钮，但忽略更关键的点：状态同步、异常恢复、用户体验。
- 按钮禁用后，要同时更新按钮文案（如“提交中…”），并加 loading 状态 class，让视觉可感知
- 请求失败后，必须恢复按钮可用状态和原始文案，否则用户卡死
- 更稳妥的做法是加一个锁变量（
let isSubmitting = false），在 submit 处理函数开头判断并 return，双重保险
校验逻辑要分层，不能全堆在 submit 里
面试官喜欢追问“如果用户不点提交，只输一半就关页面，数据怎么留？”——这其实在考你对表单状态管理的理解。
- 前端校验分两层：字段级（如必填、格式）和业务级（如用户名是否被占用、两次输入密码是否一致）
- 字段级校验建议绑定到 input/blur，用
setCustomValidity()配合reportValidity()，兼容原生约束 API - 业务级校验通常异步，需设计 loading 状态和错误提示位置，避免弹 alert 打断流程
- 补充一点：localStorage 持久化草稿是加分项，但要说清时机（如 debounce 后存，非每次 input）和清理策略（成功提交后清除）
注意默认行为和可访问性细节
看似简单的问题，往往藏着深度。比如“为什么不用 onclick 绑定表单提交？”
- onclick 无法捕获回车提交、屏幕阅读器触发等非鼠标操作，违背可访问性原则
- submit 事件天然支持所有提交方式（按钮、回车、JS 触发），且能通过
event.submitter获取具体哪个按钮触发，方便多操作区分（如“保存草稿” vs “正式提交”） - 表单内按钮默认 type="submit"，显式写
type="button"才能避免意外提交，这点常被忽略
