必须监听form的submit事件并调用Event.preventDefault()，而非按钮click；文本字段需trim()后校验；email需js严格格式验证；密码确认要trim后比对；数字输入需类型转换；用setCustomValidity()控制valid/invalid状态；实时校验应防抖或仅blur触发。
用 addEventListener('submit') 捕获表单提交，而不是直接绑 onclick
表单验证必须在提交动作真正发生前拦截，否则页面会刷新、JS 验证逻辑直接失效。用 form.addEventListener('submit', handler) 并在 handler 里调用 event.preventDefault() 是唯一可靠起点。
常见错误是给提交按钮加 onclick，这无法阻止原生提交行为；或者漏掉 preventDefault()，导致验证通过了但页面照样跳转。
- 必须监听
form元素的submit事件，不是button的click - handler 函数第一个参数必须是 event 对象，且第一行建议写
event.preventDefault() - 验证失败时不要手动
return false，靠preventDefault()和后续逻辑控制即可
检查 input.value.trim() === ''，而非只判空字符串
用户可能输入全空格，input.value === '' 会误判为“已填写”，实际是无效输入。所有文本类字段（text、email、textarea）都应先 .trim() 再判断。
另外注意：html5 原生 required 属性只校验是否为空（不 trim），所以 JS 验证逻辑要更严格，才能和用户体验一致。
立即学习“Java免费学习笔记（深入）”；
-
email类型输入框仍需 JS 校验格式，因为浏览器对type="email"的正则宽松（如允许a@b） - 密码确认字段不能只比对
.value，要确保两者都非空且.trim()后相等 - 数字类输入（
number）注意input.value是字符串，需parseFloat()或Number()转换再比较
用 setCustomValidity() 配合 :valid/:invalid css 状态
原生表单验证 API 提供了 setCustomValidity(message) 方法，它比手动增删 class 更可靠：触发后会直接影响元素的 :valid/:invalid 伪类、影响 form.checkValidity() 结果，且兼容屏幕阅读器。
关键点是：传入空字符串 '' 表示“验证通过”，传入非空字符串表示“验证失败”并显示该提示（会覆盖浏览器默认提示）。
const emailInput = document.querySelector('#email'); emailInput.addEventListener('input', () => { const email = emailInput.value.trim(); if (!email) { emailInput.setCustomValidity('邮箱不能为空'); } else if (!/^[^s@]+@[^s@]+.[^s@]+$/.test(email)) { emailInput.setCustomValidity('请输入有效的邮箱地址'); } else { emailInput.setCustomValidity(''); // ✅ 必须清空，否则一直 invalid } });避免在验证中依赖 blur 或 input 实时校验全部字段
用户还没输完就报错，体验极差。实时校验只适用于简单规则（如邮箱格式、长度），且应在用户离开字段（blur）或停止输入 300ms 后（防抖）再触发；首次提交时才应对所有字段做完整校验。
否则会出现：密码还没输完，“密码不一致”就红了；手机号刚敲第一位，就提示“格式错误”。这类干扰会显著提高放弃率。
- 提交时遍历所有必填字段，逐个调用其
checkValidity()或手动校验 - 对单字段实时反馈，用
debounce控制频率，或仅响应blur - 校验失败后，聚焦到第一个出错字段（
element.focus()），方便用户修正
表单验证真正的难点不在写逻辑，而在平衡即时反馈与不过度打扰——尤其当字段间有依赖关系（比如“结束时间必须晚于开始时间”）时，时机和状态同步很容易出错。