应改用 type="button" 绑定 click 事件，手动逐字段清空并添加自定义确认提示，避免使用原生 reset 或 form.reset()；需同步框架状态、补 aria 标签、禁用按钮、聚焦首字段并清理校验提示。
点击 reset 按钮后，表单直接清空，用户没反应过来怎么办？
HTML 原生 <input type="reset"> 或 <button type="reset"></button> 不触发任何确认逻辑，点下去就重置，无法拦截。这不是 bug，是规范行为——浏览器根本不允许 JS 拦截 reset 事件（event.preventDefault() 对它无效）。所以“二次提醒”必须绕开原生 reset 机制，用自定义逻辑模拟。
用 button + JavaScript 手动清空，才能加 confirm 弹窗
把按钮改成 <button type="button"></button>，绑定 click 事件，在里面手动重置字段并弹确认。关键点在于：不要调用 form.reset()（它同样不可拦截），而是逐字段赋默认值或空值。
-
form.reset()会无视 confirm 结果直接执行，等同于原生 reset - 推荐做法：遍历
form.elements，对input、textarea、select分别设.value = ''或.selectedIndex = 0 - 注意
checkbox和radio：要设.checked = false，不能只清 value - 如果用了框架（如 React/Vue），务必同步更新状态，否则 DOM 清了但组件 state 还在
confirm() 太生硬？用更可控的自定义提示框
confirm() 阻塞主线程、样式不可控、移动端体验差。真实项目里建议用轻量提示组件（比如基于 dialog 元素或第三方库），核心逻辑不变：
- 点击按钮 → 显示提示层 → 用户点“确定” → 执行清空逻辑 → 关闭提示
- 清空前先缓存当前值（可选）：比如保存
form.innerHTML或各字段快照，方便“取消”后还原 - 避免在提示框里放“重置所有字段”，改用具体描述：“将清除姓名、邮箱、留言内容”——用户更清楚代价
reset 按钮语义被破坏？记得补上 ARIA 和视觉反馈
改用 type="button" 后，屏幕阅读器不再识别为“重置控件”，需手动补 aria-label="重置表单"。另外，用户点了“确定”后应有明确反馈：
- 按钮临时禁用（
button.disabled = true），防止重复点击 - 清空完成后，聚焦到表单第一个字段（
form.elements[0].focus()），引导后续操作 - 如果表单有校验错误提示，清空后要一并移除（比如删除
aria-invalid="true"或对应 error class）
真正麻烦的不是代码，是判断哪些字段该清、哪些该保留（比如隐藏字段、token）、以及和服务端状态对齐。这些细节不处理好，用户点完“确定”反而更困惑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
