生产环境表单验证需兼顾即时反馈、无障碍访问和防绕过；应优先用form.elements获取元素，监听input+change双事件，使用addEventListener绑定submit并调用preventDefault()，邮箱用简单正则初筛并trim空格，手机号仅校验格式，提示须用setCustomValidity与aria属性保障可访问性。
JavaScript 操作表单本身不难，但验证用户输入时最容易掉进「只校验前端」「忽略空格/类型/事件时机」这几个坑里。真正在生产环境能用的验证，得兼顾即时反馈、无障碍访问和防绕过。
如何获取表单元素并读取用户输入值
别直接用 document.getElementById 硬写 ID，优先用表单上下文定位更健壮：
-
form元素自带elements集合，支持按 name 或索引访问：form.elements.username.value - 对
input[type="checkbox"]或radio，用checked判断是否选中，而不是读value - 注意
textarea和select的值也统一用.value获取，但select[multiple]得遍历selectedOptions - 用户粘贴或通过自动填充填入的内容，可能触发不了
input事件，建议监听input+change双事件
为什么用 addEventListener 而不是 onsubmit="return validate()"
内联事件绑定会让逻辑散落、无法动态移除、且容易被覆盖。更重要的是：它无法阻止默认行为的条件化执行。
- 必须在事件回调里显式调用
event.preventDefault()，否则表单仍会提交 - 验证失败时返回
false在内联写法里有效，但在addEventListener中完全无效 - 推荐写法：
form.addEventListener('submit', (e) => { if (!validate()) e.preventDefault(); }) - 如果要支持「回车提交」，记得同时监听
input的keydown并判断e.key === 'Enter'
正则验证邮箱、手机号时最常踩的三个坑
别直接抄网上“最强正则”，多数在真实场景下既不准又不兼容：
立即学习“Java免费学习笔记（深入）”；
- 邮箱验证用
/^[^\s@]+@[^\s@]+\.[^\s@]+$/就够用，过度校验（比如检查 MX 记录）该后端做 - 手机号别硬写中国号段正则，
1[3-9]\d{9}会漏掉携号转网新号、虚拟运营商号；前端只做格式初筛（如长度、开头），后端发短信前再校验 - 所有正则匹配前先用
.trim()去首尾空格，否则用户输个" test@ex.com "就过不了 - 用
String.prototype.match()时注意返回null还是数组，别直接链式调用[0]
自定义验证提示怎么不破坏可访问性
仅靠 alert() 或弹 div 提示，屏幕阅读器根本读不到，还打断操作流。
- 优先使用原生
setCustomValidity()+reportValidity()，浏览器会自动聚焦错误字段并显示气泡提示 - 若需自定义样式，用
aria-invalid="true"和aria-describedby关联错误文案元素 - 错误文案容器加
role="alert"，确保屏幕阅读器立即播报 - 别隐藏原生提示再自己画一套，既重复造轮子又增加维护成本
真正难的不是写验证逻辑，而是想清楚哪些该前端拦、哪些必须后端兜底，以及提示方式是否对所有人平等可用。一个没设 aria-live 的错误提示，对视障用户来说等于没提示。
