表单验证的核心是在提交前检查输入有效性并阻止无效提交，需通过ID或name获取元素、监听submit事件并preventDefault，结合正则实现邮箱、手机号等基础校验，辅以实时反馈和错误提示，且后端必须二次校验。
表单验证的核心是：在用户提交前检查输入是否符合要求，阻止无效数据提交，并给出明确提示。
获取表单和表单元素
常用方法是通过 document.getElementById 或 document.querySelector 获取表单或具体输入框。推荐给表单加 id 或 name，方便定位。
- let form = document.getElementById('myForm');
- let emailInput = form.email; // 利用 name 属性快速获取
- let phoneInput = document.querySelector('input[name="phone"]');
监听提交事件并阻止默认行为
关键一步：用 submit 事件监听表单提交，调用 event.preventDefault() 阻止页面刷新或跳转，让 JS 有机会验证。
- form.addEventListener('submit', function(e) {
- e.preventDefault(); // 必须加，否则验证没机会执行
- if (validateForm()) {
- form.submit(); // 验证通过才真正提交
- } else {
- // 提示错误，不提交
- }
- });
常见字段的验证逻辑写法
不用依赖复杂库，基础验证靠正则和原生属性就能覆盖大部分场景：
立即学习“Java免费学习笔记（深入）”；
- 邮箱：/^[^\s@]+@[^\s@]+\.[^\s@]+$/ —— 检查基本格式（注意：完整校验需后端配合）
- 手机号（国内）：/^1[3-9]\d{9}$/ —— 匹配 11 位以 13–19 开头的号码
- 必填项：input.value.trim() !== '' —— 注意要去空格再判断
- 密码强度：/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}/ —— 至少含数字、大小写字母，长度≥8
实时反馈与错误提示
光验证不够，要让用户立刻知道哪里错了。建议：
- 输入框获得焦点时清除上一次的错误样式
- 失去焦点（blur）或输入时（input）做简单校验，标红边框或显示提示文字
- 提交时统一检查所有字段，集中高亮错误项并滚动到第一个问题处
- 避免只用 alert，改用页面内提示（如 span.error-message）更友好
基本上就这些。不复杂但容易忽略的是：前端验证仅为体验优化，后端必须重新校验——JS 可被禁用或绕过。
