表单提交必须先调用event.preventDefault()阻止默认行为再校验，否则校验无效；邮箱用 /^\S+@\S+.\S+$/、手机号用 ^1[3-9]\d{9}$ 即可；正则前需trim()；密码等业务规则前后端均需校验；实时校验要防抖；blur时必校验；错误提示须绑定具体字段并支持无障碍。
表单提交时阻止默认行为再校验
直接在 submit 事件里做验证但没调用 event.preventDefault()，表单照样会提交，校验形同虚设。必须先阻止跳转或刷新，再逐项检查。
- 给
绑定addEventListener('submit', handler)，不要只靠onsubmit内联写法 - handler 第一行就写
event.preventDefault()，否则后续所有校验逻辑都可能被绕过 - 校验通过后再用
form.submit()手动提交（需注意：这不会再次触发 submit 事件）
邮箱、手机号等格式用正则但别过度复杂
用 /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 校验邮箱足够应对多数场景；追求 RFC 5322 完全合规的正则既难维护又无必要。手机号同理，国内优先匹配 ^1[3-9]\d{9}$，而非试图覆盖所有国家格式。
- 避免把正则写成
/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/这类看似严谨实则拒绝合法邮箱（如test+tag@example.com）的表达式 - 正则校验前先用
trim()去首尾空格，否则" user@domain.com "会被误判失败 - 对密码强度等业务规则，别只靠前端正则——后端仍需重复校验，前端只是体验优化
实时校验要防抖，别每敲一个字都跑一遍
监听 input 事件做实时提示时，若不加防抖，用户快速输入会频繁触发校验、DOM 更新甚至接口请求，造成卡顿或误报。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
- 用
setTimeout+clearTimeout实现简易防抖，延迟 300ms 再执行校验 - 失去焦点（
blur）时必须立即校验一次，这是用户明确表达“我要填完了”的信号 - 不要在
input里直接修改value（比如自动补全括号），容易干扰用户输入节奏
错误提示要绑定到具体字段，别只弹 alert
用 alert() 或 console.log() 提示错误，用户无法知道哪个字段出问题，更没法聚焦修正。必须把错误信息关联到对应 的视觉反馈上。
立即学习“Java免费学习笔记（深入）”；
- 为每个字段添加
，校验失败时填入文字并显示（display: block） - 同时给 input 添加
aria-invalid="true"和aria-describedby="error-id"，保障屏幕阅读器可用 - 校验失败后调用
input.focus()，把光标定位到第一个错误项，减少用户查找成本
