form.method="dialog"仅自动关闭弹窗并设置dialog.returnvalue，不执行任何表单验证；必须手动拦截提交、调用checkvalidity()或reportvalidity()进行校验，失败时阻止关闭、聚焦错误项并提示。
dialog 标签本身不校验表单，也不阻止提交 —— 表单验证逻辑和弹窗控制必须分开写，否则容易出现“点确定没反应”“提交后页面刷新”“验证失败却关了弹窗”这类问题。
为什么 form.method="dialog" 不能替代表单验证？
很多人以为加了 method="dialog" 就万事大吉，其实它只做两件事：提交时自动调用 dialog.close()，并把按钮的 value 赋给 dialog.returnValue。它完全不关心 input 是否为空、格式是否合法。
常见错误现象：
- 用户留空必填项，点“确认”后弹窗直接关闭，页面看似“成功”，实际数据没校验
- 手动在
submit事件里e.preventDefault()，但忘了恢复提交逻辑，导致后续异步请求无法触发 - 验证失败后没调用
dialog.showModal()，弹窗消失后无法再次打开（因为open属性已被移除）
正确做法是：先拦截提交 → 做验证 → 验证通过才允许 method="dialog" 自动关闭；失败则阻止关闭、聚焦错误字段、提示用户。
验证失败后如何保持 dialog 打开并聚焦错误项？
dialog.showModal() 不会重复生效 —— 如果弹窗已打开，再调一次只是无操作。验证失败时，你真正需要的是：阻止默认关闭 + 手动聚焦 + 视觉反馈。
实操建议：
- 给
form绑定submit事件，第一时间e.preventDefault() - 检查每个必填
input的checkValidity()，或手动判断.value.trim() === '' - 验证失败后，调用
input.reportValidity()触发浏览器原生提示（带红框+气泡） - 紧接着
input.focus()，确保键盘用户能立刻修正 - 不要调用
dialog.close()，更不要手动删open属性 —— 它还在开着，只是你拦住了提交
注意：reportValidity() 在 Safari 中对自定义验证（如 setCustomValidity()）支持不稳定，必要时 fallback 到 classList.add('error') + aria-invalid="true"。
异步提交（如 fetch）时怎么避免弹窗提前关闭？
一旦用了 method="dialog"，表单提交就变成同步关闭行为，和 fetch 这类异步操作天然冲突。强行混用会导致“弹窗闪退”或“返回值拿不到”。
推荐方案：放弃 method="dialog"，改用纯 JS 控制流。
- 移除
form上的method="dialog"，改为method="POST"或直接去掉 - 在
submit事件中e.preventDefault()，然后执行fetch() -
fetch成功后，显式调用dialog.close('success')，失败则保持打开、显示错误信息 - 按钮必须带
value属性（如<button value="submit">提交</button>），否则dialog.returnValue在 Chrome/Firefox/Edge 中为空字符串 - Safari（截至 v17.6）始终返回空字符串，别依赖
dialog.returnValue传业务状态，改用data-*属性或闭包变量存结果
关键点：异步场景下，dialog.close() 必须由你亲手调用，且只能在你知道“确实该关了”的那一刻。
样式和焦点陷阱：Safari 下 dialog 常见失焦与错位
即使验证和逻辑都对了，Safari 用户仍可能遇到：弹窗不居中、首次打开不聚焦、按 Tab 键跳到背景页 —— 这些不是代码 bug，而是 Safari 渲染层对 dialog 的实现缺陷。
必须手动补的几件事：
- 强制重置定位：
dialog { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }，否则 Safari 可能贴顶或偏左 - 父容器禁用
transform和will-change，否则 dialog 内容直接消失（无报错，只渲染空白） - 打开后加
setTimeout(() => dialog.focus(), 0)，绕过 Safari 的 focus 延迟 - 关闭后手动恢复触发按钮焦点：
dialog.addEventListener('close', () => triggerBtn?.focus())，否则键盘用户卡在空白处 - 避免在
dialog内使用position: fixed子元素，Safari 渲染异常
最麻烦的一点：这些修复在 Chrome 和 Firefox 里可能多余，但在 Safari 里缺一不可 —— 没有“一次写完全平台兼容”的捷径，必须按浏览器分条件处理。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
