JavaScript表单验证与正则使用教程

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《JavaScript表单验证与正则应用详解》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

JavaScript表单验证以正则表达式为核心，涵盖邮箱、手机号、密码、身份证等高频场景；需在submit事件中集中校验并阻止默认提交，结合前端提示与后端二次校验。

JavaScript中实现表单验证，正则表达式是核心工具之一——它能精准匹配输入格式，比如手机号、邮箱、密码强度等，比单纯检查长度或非空更可靠。

常用正则表达式写法（直接可用）

以下是一些高频场景的正则模式，可直接复制到验证逻辑中：

• 邮箱：/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/（支持常见域名，排除连续点或开头/结尾符号）
• 手机号（中国大陆）：/^1[3-9]\d{9}$/（匹配13–19开头的11位数字）
• 密码（6–16位，含字母和数字）：/(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,16}/（使用正向先行断言确保两者都存在）
• 身份证号（18位，含X校验）：/^\d{17}[\dXx]$/（基础格式校验，如需严格校验需配合算法）

在表单提交时触发验证

不要依赖单纯的onblur或oninput做最终判断，应在表单submit事件中集中校验，防止绕过：

• 用event.preventDefault()阻止默认提交
• 对每个必填字段调用regex.test(input.value)，返回false就标红并提示
• 所有验证通过才允许form.submit()或发起Ajax请求

提升体验的小技巧

正则验证不是“一锤定音”，要兼顾用户感受：

• 输入过程中用input事件做轻量提示（如邮箱@符号出现后显示“格式可能正确”）
• 错误提示紧邻对应输入框，避免只弹alert打断操作流
• 对中文全角字符、前后空格提前用.trim()或.replace(/[\uFF01-\uFF5E]/g, c => String.fromCharCode(c.charCodeAt(0) - 65248))处理

基本上就这些。正则写对是关键，但别忘了结合语义化HTML（如type="email"、required）和后端二次校验——前端验证只是第一道防线，不是保险箱。

以上就是《JavaScript表单验证与正则使用教程》的详细内容，更多关于的资料请关注golang学习网公众号！