表单onsubmit阻止提交不等于安全，需显式调用checkValidity()或reportValidity()触发校验；自定义校验须用setCustomValidity()；应使用addEventListener绑定submit事件并调用preventDefault()；提交按钮必须为type="submit"。
form 表单的 onsubmit 事件默认会提交，但阻止它不等于表单就安全了
浏览器原生表单验证（比如 required、type="email"）只在调用 form.reportValidity() 或用户点击提交时触发；单纯监听 onsubmit 并 return false 或调用 event.preventDefault() 只是拦住提交动作，不会自动校验字段。很多开发者以为加了 preventDefault() 就万事大吉，结果后端照样收到空数据。
- 必须显式调用
form.checkValidity()或form.reportValidity()触发校验逻辑 -
checkValidity()返回布尔值，不弹提示；reportValidity()会显示浏览器默认错误气泡，更友好 - 如果用自定义校验（比如手机号正则），得手动调用
input.setCustomValidity("错误信息")，否则checkValidity()始终返回true
用 addEventListener("submit", ...) 替代内联 onsubmit 更可靠
内联写法如 <form onsubmit="return validate()> 容易被覆盖或忽略返回值；现代写法统一用事件监听，能更好控制执行时机和条件。
- 确保在 DOM 加载完成后绑定，避免
form元素尚未存在 - 监听函数里必须调用
event.preventDefault()，否则即使校验失败也会提交 - 不要在监听函数里直接
return false—— 这对addEventListener无效
form.addEventListener("submit", function(e) {
if (!form.checkValidity()) {
e.preventDefault();
form.reportValidity(); // 显示原生提示
}
});
后端永远不能信任前端校验，但前端校验能减少无效请求
前端拦截只是用户体验优化，不是安全防线。用户禁用 JS、绕过表单、用 curl 直接 POST，都能跳过所有前端逻辑。所以 preventDefault() + checkValidity() 的组合，目的不是“防止坏数据”，而是“减少用户多点一次、少等一秒”。
- 常见错误：把校验逻辑全塞进
submit事件，导致按钮点击无反馈、loading 状态难控制 - 建议把校验拆到
input的blur或input事件里提前提示，提升响应感 - 若使用框架（React/Vue），注意原生
form行为与框架状态同步问题，比如受控组件未及时更新value会导致checkValidity()判定不准
submit 按钮类型写错会导致整个拦截失效
很多人把提交按钮写成 <button>提交</button> 或 <button type=" button>提交</form>，这样根本不会触发 form 的 submit 事件，自然也进不了你的拦截逻辑。
立即学习“前端免费学习笔记（深入）”；
- 必须用
<button type="submit"></button>或<input type="submit"> -
type="reset"或type="button"不会触发表单提交，别混用 - 如果按钮在
form外部，需用form属性指向对应表单 ID：<button type="submit" form="myForm"></button>
type="submit" 的识别。漏掉任何一个环节，拦截就断在第一步。 
