JavaScript用户输入验证需实时监听input事件、后端必须重验；checkValidity()用于条件判断，reportValidity()触发提示；邮箱手机号正则宜简不宜繁；禁用JS时表单仍可提交，关键逻辑必须服务端校验。
JavaScript 用户输入验证不是加个 onsubmit 就完事——它得在用户打字时就有反馈，提交前兜底，还得防绕过。纯前端验证只用来提升体验，后端永远要重验。
用 addEventListener('input') 实时监听，别用 change
change 只在失焦时触发，用户输错半天没提示；input 事件每敲一个键、粘贴一次都触发，适合即时校验。
- 对密码字段，可监听
input检查长度和特殊字符，但别实时显示“弱/强”，避免诱导用户凑规则 -
邮箱输入框建议搭配
pattern属性 +input事件双重判断：正则只做基础格式（如含 @ 和 .），不追求 RFC 5322 全兼容 - 避免在
input回调里直接调setCustomValidity()，它会干扰原生提示样式；改用自定义span或aria-live区域更新错误文案
checkValidity() 和 reportValidity() 的真实用途
这两个方法不是“执行验证”，而是触发浏览器内置校验流程——包括检查 required、minlength、pattern 等属性，并显示默认气泡提示。
-
checkValidity()返回布尔值，适合用于条件判断（例如：只有所有字段都通过才启用提交按钮） -
reportValidity()除了返回布尔值，还会强制弹出错误提示，常用于表单submit事件中兜底：form.addEventListener('submit', e => {
if (!form.checkValidity()) {
e.preventDefault();
form.reportValidity();
}
}); - 注意：如果字段设置了
setCustomValidity('')（空字符串），checkValidity()才返回true；设成非空字符串即视为无效
正则验证邮箱、手机号时的常见陷阱
别信网上抄来的超长正则。用户要的是快速反馈，不是语法学家级匹配。
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
立即学习“Java免费学习笔记（深入）”；
- 邮箱：用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/足够。过度校验（比如限制域名层级、禁止连续点）反而导致合法邮箱被拒 - 手机号：中国号码优先用
^1[3-9]\d{9}$，别硬套运营商号段（号段随时变，且虚拟运营商号不固定） - 所有正则必须加
^和$，否则"abc@defg"也能通过@.*\. - 用
test()而非match()做布尔判断，前者更快且不产生数组开销
最易被忽略的一点：禁用 JavaScript 后，表单照样能提交。所有关键逻辑（如金额不能为负、邮箱必须唯一）必须在服务端重新执行，前端验证只是减少用户挫败感的糖衣。
