JavaScript表单验证需分层设计：用HTML原生属性+checkValidity()做基础校验，中文输入用composition事件防误报，数字类优先type属性，正则仅作粗筛，后端才是最终验证防线。
JavaScript 验证用户输入不是“加个 onsubmit 就完事”，关键看你要防什么：是阻止空提交、过滤非法字符，还是实时反馈格式错误？不同场景该用不同手段，硬套一个方案反而容易漏掉边界问题。
表单提交前用 checkValidity() 做基础校验
浏览器原生支持的 required、type="email"、pattern 等属性，配合 checkValidity() 可以快速拦截明显错误，不用手写正则判断空值或邮箱格式。
实操建议：
- 给
<input>加上required或pattern后，调用form.checkValidity()返回true才继续提交 - 别只依赖
submit事件——用户可能直接点按钮触发，也可能是按回车，统一用form.addEventListener('submit', e => { if (!e.target.checkValidity()) e.preventDefault(); }) -
checkValidity()不会自动显示浏览器默认提示（如“请填写此字段”），需要手动调用reportValidity()才弹出
实时验证时慎用 input 事件监听
input 事件响应快，但会在每次按键后立刻触发，对中文输入法不友好——用户还没选完词就报错，体验很差。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 中文输入场景优先用
compositionstart+compositionend组合判断是否处于输入中，只在compositionend后做校验 - 如果必须用
input，加个简单防抖：用setTimeout延迟 300ms 再执行验证逻辑，避免高频触发 - 别在
input里直接改value（比如强制转小写），这会打断用户正在输入的内容，尤其影响手机键盘光标位置
自定义规则别全靠正则，先用 type 和 step 拦第一道
比如手机号、身份证号、金额，很多人一上来就写长长一串正则，但其实浏览器能帮你挡掉大量无效输入。
实操建议：
- 数字类用
type="number"+min/max/step，比/^\d+\.?\d*$/更可靠，还能禁用非数字粘贴 - 手机号优先用
type="tel"，虽然不校验格式，但能唤起数字键盘，减少误输 - 身份证号这种复杂规则，正则只做粗筛（比如长度、开头数字），最终应交由后端或专用校验库（如
idcard-validation）确认，前端正则很难覆盖所有地区编码变化
后端才是验证终点，前端只是体验层
所有前端验证都能被绕过——禁用 JS、删掉 disabled、直接发请求。所以 if (userInput === 'admin') alert('no') 这种逻辑毫无安全意义。
实操建议：
- 前端验证目标只有一个：提升用户操作效率，减少无意义的请求往返
- 敏感逻辑（如权限判断、金额合法性、密码强度）必须在后端重复校验，且不能依赖前端传来的任何“已验证”标记
- 如果后端返回校验失败，错误信息要具体（如
"phone: must be 11 digits"），而不是笼统的"参数错误"，否则前端无法准确定位哪个字段要高亮
真正难的不是写对一个正则，而是想清楚这个输入在业务流里会被谁消费、在哪一步失效、出错后用户该怎么改——这些决定了你该在哪儿拦、拦多严、提示多细。
