表单验证应使用 addeventlistener 监听 submit 事件并调用 e.preventdefault() 拦截无效提交，避免 onsubmit 内联写法；文本字段需 trim() 并结合 required 属性；邮箱、手机号正则宜宽松，密码强度分项校验；推荐 setcustomvalidity 实现原生样式与实时反馈。
用 addEventListener 监听提交事件而不是直接绑 onsubmit
表单验证的核心是拦截无效提交，但很多人直接在 HTML 里写 onsubmit="return validate()"，这会让逻辑耦合、难测试、无法动态增删验证规则。推荐用 JS 原生监听：
document.getElementById('myForm').addEventListener('submit', function(e) {
if (!validateForm()) {
e.preventDefault(); // 阻止默认提交
}
});注意：必须调用 e.preventDefault()，否则浏览器会照常跳转或刷新；且验证函数返回 false 才代表失败，别忘了显式返回。
校验空值和类型时优先用 trim() + required 属性
用户输入空格后点提交，value === '' 会误判为非空。所有文本类字段（input[type="text"]、textarea）务必先 .trim()：
const name = document.getElementById('name').value.trim();
if (name === '') {
showError('姓名不能为空');
return false;
}同时，HTML 层加 required 属性能触发原生提示，且部分浏览器（如 Chrome）会在 form.checkValidity() 中一并检查——但别依赖它做唯一校验，因为可被绕过（比如 JS 删除 required 或直接调 form.submit()）。
邮箱和手机号用正则要控制粒度，别抄网上“最强验证”
过于严格的正则（比如要求邮箱必须含下划线、域名必须是 .com）反而挡掉合法用户。实际场景中，宽松校验 + 后端二次确认更可靠：
动态WEB网站中的PHP和MySQL：直观的QuickPro指南第2版
下载
动态WEB网站中的PHP和MySQL详细反映实际程序的需求，仔细地探讨外部数据的验证(例如信用卡卡号的格式)、用户登录以及如何使用模板建立网页的标准外观。动态WEB网站中的PHP和MySQL的内容不仅仅是这些。书中还提到如何串联JavaScript与PHP让用户操作时更快、更方便。还有正确处理用户输入错误的方法，让网站看起来更专业。另外还引入大量来自PEAR外挂函数库的强大功能，对常用的、强大的包
- 邮箱：用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/足够——只保证基本格式，不验证域名是否存在 - 手机号：中国大陆就用
/^1[3-9]\d{9}$/，别加\b或$外的边界符，避免粘连输入框内容 - 密码强度：至少 8 位、含大小写字母+数字，用多个
.test()拆开判断比一个超长正则更易维护和提示
undefined（隐式转换为 false），建议每个规则单独封装函数并加注释说明覆盖范围。
实时反馈别只靠 alert，用 setCustomValidity 更兼容
alert 会打断操作流，且移动端体验差。现代做法是结合表单原生验证 API：
const emailInput = document.getElementById('email');
emailInput.addEventListener('input', () => {
const email = emailInput.value;
if (email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
emailInput.setCustomValidity('邮箱格式不正确');
} else {
emailInput.setCustomValidity(''); // 清空错误，否则后续 submit 仍被拦
}
});这样既触发原生红框样式，又支持 form.reportValidity() 统一弹出错误汇总。注意：每次成功输入后必须调 setCustomValidity('')，否则字段会永久标记为无效。
验证真正复杂的地方不在正则或事件绑定，而在于错误状态的清理时机和多字段联动（比如“确认密码”需实时比对“新密码”）。这些逻辑一旦散落在各处，很快就会出现改一处漏三处的情况。 
