JavaScript如何实现表单验证【教程】
JavaScript表单验证需用addEventListener('submit')绑定form元素并调用preventDefault()，配合trim()、正则校验、insertAdjacentHTML插入精准错误提示，提交后须清除错误状态和监听器。
JavaScript 表单验证不是靠 required 属性“自动生效”的，而是要监听提交行为、手动检查值、阻止默认提交并给出反馈——否则用户点提交就直接发空数据了。
用 addEventListener('submit') 拦截表单提交
HTML 的 onsubmit="return false" 或内联 JS 很难维护，且无法和现代表单逻辑解耦。必须用 addEventListener 绑定到 form 元素，并在回调里调用 event.preventDefault()。
- 不调用
preventDefault()，表单会立即提交，JS 验证根本没机会运行 - 绑定对象必须是
form元素本身，不是按钮；按钮点击会触发表单的submit事件 - 一个页面多个表单时，要分别获取每个
form并单独绑定，不能只写一次
验证空值和格式要用 .value.trim() !== '' 和正则
input.value 可能全是空格，== ''
RegExp.test() 而非简单包含判断。
- 邮箱验证别用
str.includes('@')——"abc@def@ghi"也能过 - 手机号建议用中国号段正则：
/^1[3-9]\d{9}$/，注意^和$锚定首尾，避免"abc13812345678def"混入 - 密码强度可分步检查：
password.length >= 8、/(?=.*[A-Z])/.test(password)、/(?=.*\d)/.test(password)
显示错误信息别用 alert()，改用 Element.insertAdjacentHTML()
alert() 中断操作、无法定位错误字段、不支持样式，实际项目中必须把提示插入到对应输入框下方。
- 为每个
input添加唯一id（如id="email"），错误提示容器用id="email-error" - 用
input.nextElementSibling?.id === 'email-error'判断是否已有提示，避免重复插入 - 插入 HTML 示例：
input.insertAdjacentHTML('afterend', '邮箱格式不正确')
提交成功后别忘了清空错误状态和重置 UI
验证通过、AJAX 提交成功后，如果用户后续修改字段又删掉内容，旧的错误提示可能还挂着，或样式没恢复。
- 每次验证前先清除所有
class="error"的span和输入框的aria-invalid="true" - 成功提交后调用
form.reset()，但注意它不会清除自定义插入的提示元素，得手动删document.querySelectorAll('[id$="-error"]').forEach(el => el.remove()) - 如果用了
input.addEventListener('input', ...)做实时校验，记得在提交成功后解除监听，否则可能触发冗余验证
真正麻烦的不是写几行验证逻辑，而是让错误提示及时出现、精准定位、不残留、不干扰后续操作——这些细节堆起来，才是用户觉得“这个表单很顺”的原因。
