网页表单有效校验需浏览器原生机制与JS协同：提交按钮必须为type="submit"，onsubmit回调开头立即preventDefault()并调用reportValidity()，pattern需配title，防重复提交应通过守卫变量控制submit事件。
网页表单要真正拦住无效请求，不能只靠写几个 required 或 pattern 就完事。核心是让浏览器原生校验机制和 JS 逻辑协同工作，而不是互相覆盖或彼此忽略。
必须用 type="submit" 触发校验上下文
只有点击 <button type="submit"></button> 或 <input type="submit">，浏览器才会自动执行 required、pattern、type="email" 等属性的校验，并触发 submit 事件。如果按钮写成 type="button" 或用 <div> 模拟，整个原生校验链就断了——用户一按回车或点按钮，表单直接跳转或刷新，JS 校验根本没机会运行。
<ul>
<li>提交按钮必须带 <code>type="submit"，哪怕要自定义样式，也应通过 CSS 覆盖，而非换标签
onclick 里做校验并忘记 return false，这种写法绕过表单事件流，reportValidity() 也无法调用onsubmit 里第一行就要 preventDefault()
很多人把 e.preventDefault() 写在校验通过之后，这是危险的。只要没调用它，浏览器就会走默认提交流程：页面跳转、刷新、发请求——哪怕你后面写了 AJAX，用户也已经看不到结果了。
- 在
addEventListener("submit", ...)的回调开头就加e.preventDefault()，不依赖任何条件 - 之后立刻调用
form.reportValidity()，它会批量检查所有字段，弹出带title文字的原生提示，比手动遍历checkValidity()更省事可靠 - 如果自定义校验失败，也别忘了调用
input.setCustomValidity("错误信息")，再跟一句input.reportValidity()，否则浏览器不会显示提示
原生属性不是摆设，但得手动唤醒
required、pattern、minlength 这些不是“写了就生效”的拦截器，它们只在两个时机起作用：用户点 type="submit" 按钮，或代码里显式调用 form.reportValidity() / form.checkValidity()。光监听 submit 事件却不调这个方法，等于校验逻辑全白搭。
-
pattern正则要配title属性，否则出错时气泡提示为空白 - 手机号校验写
pattern="^1[3-9]\d{9}$"比用 JS 正则更轻量，且支持 :valid/:invalid 伪类做样式反馈 - 想跳过某次提交的原生校验（比如“保存草稿”不校验必填项），给对应按钮加
formnovalidate属性即可
防重复提交得锁住 submit 事件本身
禁用按钮只是视觉辅助，拦不住回车提交、脚本调用 form.submit() 或多次快速点击。真正可控的闸门只有一个：submit 监听器里的守卫变量。
- 声明一个全局布尔值，如
let isSubmitting = false - 在 submit 回调中，先
e.preventDefault()，再判断if (isSubmitting) return，然后立即设isSubmitting = true - 校验通过后调用
form.submit()（注意是原生方法，不是 jQuery 的），它不会再次触发 submit 事件，避免递归 - 不要在中间加
await fetch()或setTimeout，那会让原生提交逻辑漏过去
前端校验从来不是为了“挡住坏人”，而是减少无效请求、提升填写体验。所有原生能力都得用对位置、对时机，否则再漂亮的 HTML 属性也只是装饰。
