dialog 标签不参与表单验证，验证由 form 及其 input 承担；需确保 form 预加载、可见可聚焦，提交按钮为 type="submit"，调用 reportvalidity() 前手动 focus 必填字段，并校验通过后再 close。
dialog 标签本身不参与表单验证逻辑，它只是个容器；验证仍由 form 和其内部 input 元素承担。直接把 dialog 当作“验证组件”用，会发现提交没反应、错误不提示、reportValidity() 失效——根本原因是弹窗打开后焦点或 DOM 状态变化导致原生校验链断裂。
dialog 中的 form 提交时 validation 不触发
常见现象：点击 dialog 里的提交按钮，表单静默提交（跳转或刷新），或完全无响应；checkValidity() 返回 false 但页面不显示错误气泡。
-
dialog.showModal()打开后，浏览器会将焦点移到dialog内部，但如果第一个可聚焦元素不是form或其中的input，部分浏览器（尤其是 Safari）可能跳过自动校验流程 -
form必须在dialog打开前就已存在于 DOM 中（不能动态innerHTML注入），否则 Chrome/Firefox 可能忽略其约束属性（如required） - 不要给
form设display: none或hidden属性——哪怕只在dialog关闭时临时隐藏，也会让reportValidity()拒绝渲染提示
如何让 reportValidity() 在 dialog 里真正生效
reportValidity() 是唯一能主动触发原生 UI 错误提示的方法，但它在 dialog 中有特殊要求：必须确保调用时目标 input 可见、可聚焦、且所属 form 已绑定事件。
- 在
dialog.showModal()后，手动focus()到第一个必填字段，例如：dialog.querySelector('input[required]').focus() - 提交按钮必须是
type="submit"且位于form内部；若用button+onclick，需显式调用form.reportValidity()并用event.preventDefault()阻止默认行为 - Safari 15.4+ 才完整支持
setCustomValidity()配合reportValidity()，旧版 Safari 会静默失败——建议检测：if (form.reportValidity?.() === false) { /* fallback 提示 */ }
dialog.returnValue 与表单验证结果联动
dialog.returnValue 适合做“确认/取消”语义分流，但不能替代验证状态。别指望 dialog.close('valid') 自动代表表单通过了校验。
- 正确做法：先校验
form.checkValidity()，仅当为true时才dialog.close('submit')；否则保持打开并聚焦错误字段 - 关闭后读取
dialog.returnValue仅用于判断用户意图（如'submit'/'cancel'），而非数据合法性——服务端仍要重新验证 - 避免在
dialog.addEventListener('close', ...)里直接发请求：此时表单可能已被移除或值已失效，应在校验通过后立即收集form.elements值再关闭
最易被忽略的一点：如果 dialog 里有多个 form（比如嵌套编辑弹窗），每个 form 的验证状态彼此隔离，reportValidity() 只作用于调用它的那个实例——没有全局“整个弹窗是否有效”的 API，得自己遍历判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
