必须用 或 form.requestsubmit() 触发校验，form.submit() 绕过所有 html5 验证逻辑，不检查、不提示、不阻止提交；替代方案为 form.requestsubmit() 或手动 checkvalidity() + 条件提交。
必须用 <button type="submit"></button> 或 form.requestSubmit()，其他方式都绕过校验。
为什么 form.submit() 不触发任何验证
这个方法是纯 JS 提交接口，浏览器直接跳过所有 HTML5 验证逻辑。哪怕你写了 required、pattern、type="email"，调它就等于“假装用户没填错”——不检查、不提示、不阻止提交。
-
form.submit()适合后端已确认合法、只走流程的场景（比如跳转前的轻量埋点） - 只要表单有约束，就别用它；误用会导致用户输错邮箱却直接发请求
- 替代方案只有
form.requestSubmit()（现代浏览器支持）或手动checkValidity()+ 条件提交
form.requestSubmit() 的兼容性与兜底写法
它模拟真实点击 submit 按钮的行为：触发 checkValidity()、显示气泡、滚动到首个错误字段、阻止表单提交（若失败）。但 Safari 14.1+、Chrome 69+ 才支持，旧安卓 WebView 和 IE 完全不认。
- 安全写法是先
form.checkValidity()判断，再决定是否发请求 - 失败时手动调
form.reportValidity()强制弹出提示（即使没点按钮） - 不要依赖 polyfill——
requestSubmit是底层行为，没法完美补全
submit 事件里怎么确保所有字段都被检查
原生验证只在 submit 触发时统一跑一遍，但如果你在 submit 事件里 event.preventDefault() 后又没调 checkValidity()，那就等于白设属性。
- 绑定
submit事件后，第一行必须是e.preventDefault() - 第二步必须显式调
form.checkValidity()，它返回布尔值，不是副作用操作 - 想聚焦第一个错项，用
form.querySelector(':invalid')，别遍历所有 input - 注意：
:invalid伪类只在验证后才生效，刚加载页面时它选不到任何元素
容易被忽略的三个细节
很多人卡在看似“校验没反应”，其实是这些地方漏了：
-
<form></form>标签没加novalidate属性？不加反而更好——加了会彻底关掉原生校验 - 按钮写成
<button></button>却没声明type="submit"？默认是type="button"，点它完全不进验证流程 - 用 JS 给
input.value赋值后，字段仍显示“未交互”状态？required在首次 blur 前不会报错，得手动reportValidity()
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
