JavaScript表单验证方法详解

知识点掌握了，还需要不断练习才能熟练运用。下面golang学习网给大家带来一个文章开发实战，手把手教大家学习《JavaScript如何实现表单验证？》，在实现功能的过程中也带大家重新温习相关知识点，温故而知新，回头看看说不定又有不一样的感悟！

必须在表单submit事件中调用event.preventDefault()阻止默认提交，仅监听form元素的submit事件；利用checkValidity()和reportValidity()进行原生约束验证，setCustomValidity()处理业务逻辑验证，服务端必须重新校验。

表单提交前用 addEventListener('submit') 拦截验证

浏览器默认会直接提交表单，跳转页面或清空输入，所以必须在提交瞬间阻止默认行为。不加 event.preventDefault()，验证逻辑根本没机会执行。

常见错误是绑定在按钮的 click 事件上——这无法捕获回车提交、无障碍操作或脚本触发的提交。

• 只对
  元素监听 submit 事件，最可靠
• 验证失败时返回 false 不起作用，必须调用 event.preventDefault()
• 验证通过后可手动调用 form.submit()（注意：这会绕过再次触发 submit 事件）

checkValidity() 和 reportValidity() 能省掉不少重复代码

现代浏览器原生支持 HTML5 表单约束（required、type="email"、minlength 等），不必从头写正则校验邮箱或手机号。

checkValidity() 返回布尔值，只做判断；reportValidity() 在返回 false 的同时，自动显示浏览器默认提示气泡（含本地化文案），体验更一致。

• 对单个 <input> 调用 input.checkValidity() 可单独验证某字段
• 整个表单调用 form.reportValidity() 会批量检查所有带约束的字段，并高亮首个无效项
• 注意：自定义验证（如“两次密码不一致”）仍需手动设置 setCustomValidity()

用 setCustomValidity() 处理业务逻辑类验证

原生约束管不了“密码和确认密码是否一致”“用户名是否已被注册”这类场景，这时得靠 setCustomValidity() 注入自定义错误信息。

关键点在于：传入空字符串 '' 表示“通过”，传入非空字符串才表示“不通过”。很多初学者忘记清空旧错误，导致字段一直报错。

• 在 input 或 blur 事件中实时验证并调用 input.setCustomValidity('') 或 input.setCustomValidity('密码不一致')
• 不要在 submit 里集中调用——用户得不到即时反馈
• 配合 input.validity.customError 可读取当前是否因自定义规则失败

避免验证后表单仍能绕过 JS 提交

JS 验证纯属前端体验优化，服务器永远要重新校验。但前端也得防住明显绕过：比如用户禁用 JS 后直接点提交，或用 DevTools 删除 required 属性再提交。

真正有效的防御不是“拦住所有非法提交”，而是让绕过者立刻暴露问题——比如提交后服务端返回 400 并附带错误字段，前端用这些信息反向更新 UI。

• 不要依赖 disabled 按钮来阻止提交（用户可删属性）
• 服务端返回的错误响应格式最好和前端验证结构一致，方便统一渲染
• 敏感操作（如支付、删账号）的验证必须服务端强校验，前端只是锦上添花

验证的复杂点不在写多少正则，而在于错误时机、错误位置、错误语言与用户预期是否匹配。浏览器原生 API 已覆盖大多数情况，硬写一堆 if/else 反而容易漏掉 focus 管理、国际化提示、屏幕阅读器支持这些细节。

文中关于的知识介绍，希望对你的学习有所帮助！若是受益匪浅，那就动动鼠标收藏这篇《JavaScript表单验证方法详解》文章吧，也可关注golang学习网公众号了解相关技术文章。