必须在表单submit事件中调用event.preventDefault()阻止默认提交，仅监听form元素的submit事件；利用checkValidity()和reportValidity()进行原生约束验证，setCustomValidity()处理业务逻辑验证，服务端必须重新校验。
表单提交前用 addEventListener('submit') 拦截验证
浏览器默认会直接提交表单，跳转页面或清空输入，所以必须在提交瞬间阻止默认行为。不加 event.preventDefault()，验证逻辑根本没机会执行。
常见错误是绑定在按钮的 click 事件上——这无法捕获回车提交、无障碍操作或脚本触发的提交。
- 只对
元素监听submit事件，最可靠 - 验证失败时返回
false不起作用，必须调用event.preventDefault() - 验证通过后可手动调用
form.submit()（注意：这会绕过再次触发submit事件）
checkValidity() 和 reportValidity() 能省掉不少重复代码
现代浏览器原生支持 HTML5 表单约束（required、type="email"、minlength 等），不必从头写正则校验邮箱或手机号。
checkValidity() 返回布尔值，只做判断；reportValidity() 在返回 false 的同时，自动显示浏览器默认提示气泡（含本地化文案），体验更一致。
立即学习“Java免费学习笔记（深入）”；
- 对单个
调用input.checkValidity()可单独验证某字段 - 整个表单调用
form.reportValidity()会批量检查所有带约束的字段，并高亮首个无效项 - 注意：自定义验证（如“两次密码不一致”）仍需手动设置
setCustomValidity()
用 setCustomValidity() 处理业务逻辑类验证
原生约束管不了“密码和确认密码是否一致”“用户名是否已被注册”这类场景，这时得靠 setCustomValidity() 注入自定义错误信息。
关键点在于：传入空字符串 '' 表示“通过”，传入非空字符串才表示“不通过”。很多初学者忘记清空旧错误，导致字段一直报错。
- 在
input或blur事件中实时验证并调用input.setCustomValidity('')或input.setCustomValidity('密码不一致') - 不要在
submit里集中调用——用户得不到即时反馈 - 配合
input.validity.customError可读取当前是否因自定义规则失败
避免验证后表单仍能绕过 JS 提交
JS 验证纯属前端体验优化，服务器永远要重新校验。但前端也得防住明显绕过：比如用户禁用 JS 后直接点提交，或用 DevTools 删除 required 属性再提交。
真正有效的防御不是“拦住所有非法提交”，而是让绕过者立刻暴露问题——比如提交后服务端返回 400 并附带错误字段，前端用这些信息反向更新 UI。
- 不要依赖
disabled按钮来阻止提交（用户可删属性） - 服务端返回的错误响应格式最好和前端验证结构一致，方便统一渲染
- 敏感操作（如支付、删账号）的验证必须服务端强校验，前端只是锦上添花
if/else 反而容易漏掉 focus 管理、国际化提示、屏幕阅读器支持这些细节。 
