submit事件中event.preventdefault()必须在回调第一行同步执行，否则页面会刷新；校验失败需手动调用reportvalidity()；novalidate仅禁用原生弹窗，不影响checkvalidity()；动态插入表单须立即绑定或用事件委托。
submit 事件里必须同步调用 event.preventDefault()
校验失败后页面仍刷新，90% 是因为 event.preventDefault() 没在 submit 回调第一行执行。它不是开关，是运行时指令——浏览器一旦开始处理默认提交，就不可逆。哪怕只晚半拍（比如包在 if 分支里、塞进 setTimeout 或 fetch().then()），都等于没拦。
常见错误写法：
-
if (form.checkValidity()) { event.preventDefault(); }—— 条件成立才拦，失败时根本没执行 -
fetch('/api').then(() => event.preventDefault())—— 异步回调里调用，早已刷新 -
button.onclick = () => { event.preventDefault(); }—— 回车提交不触发 click，完全漏掉
校验失败时必须主动触发 reportValidity()
只加 event.preventDefault() 不等于表单就校验了。浏览器原生校验（required、type="email" 等）只在用户点击提交或调用 form.reportValidity() 时激活。监听 submit 后若不手动触发，校验逻辑压根不会跑，空数据直接发出去。
正确顺序只有这一种：
- 第一行：
event.preventDefault() - 第二行：
if (!form.checkValidity()) { form.reportValidity(); return; } - 后续才是自定义逻辑（如 fetch、跳转等）
novalidate 属性和校验失败拦截的关系
novalidate 只禁用 submit 时的原生弹窗和焦点阻止，不影响 checkValidity() 返回值，也不影响你手动调用 reportValidity()。加了 novalidate 还被拦住？大概率是你 JS 里又调了 reportValidity()，或者用了 setCustomValidity() 触发了自定义校验。
确认 novalidate 是否生效的方法：
- 删掉所有 JS，只留一个
required输入框 + 提交按钮 - 点按钮，不弹红框、不阻止焦点离开 → 生效
- 否则检查：
novalidate是否写在<form></form>上（不能写在<input>）、是否拼错（如noValidate）、是否嵌套表单误加在外层
动态插入表单时最容易漏掉的绑定时机
表单是通过 fetch 或框架组件异步插入的，但你在 DOMContentLoaded 里查 document.querySelector('form')，十有八九查不到——绑定失败，后续任何提交都走原生流程，URL 后面挂着一串 ?xxx=yyy。
两种可靠解法：
- 用事件委托：
document.addEventListener('submit', e => { if (e.target.matches('form[data-ajax]')) { e.preventDefault(); /* ... */ } }) - 插入 DOM 后立刻绑定：
formContainer.insertAdjacentHTML('beforeend', html); formContainer.querySelector('form').addEventListener('submit', handler)
别依赖“稍后等 DOM 就绪”——动态内容没有“就绪”的模糊窗口，只有显式插入+显式绑定。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
