邮箱验证使用基础正则 /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/ 覆盖常见格式;2. 手机号用 /^1[3-9]d{9}$/ 匹配大陆主流号段;3. 密码需至少8位并包含大小写、数字、特殊字符中三项,通过分步正则检测;4. 身份证采用简化正则 /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}(d|X)$/ 校验18位结构;5. 中文姓名用 /^[u4e00-u9fa5]{2,4}$/ 限制2-4个汉字;6. URL 用 /^https?://(?:[-w.]|(?:%[da-fA-F]{2}))+/ 验证http/https开头。结合HTML5表单属性与JS正则可提升校验可靠性。

表单验证是前端开发中不可或缺的一环,JavaScript 正则表达式(RegExp)在其中扮演着关键角色。通过合理使用正则,可以高效校验用户输入的格式是否合规。下面整理几种常见场景下的正则验证技巧,帮助你在实际项目中快速上手。
1. 邮箱格式验证
邮箱是表单中最常见的字段之一,其格式有一定规范:由字母、数字、点、下划线和连字符组成,中间有一个 @ 符号,后跟域名。
// 基础但实用的邮箱正则
const emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+.[a-zA-Z]{2,}$/;
使用方式:
if (emailRegex.test(“user@example.com”)) {
console.log(“邮箱格式正确”);
}
// 注意:此正则覆盖大多数常见情况,极端合法邮箱可能不匹配,但对一般业务足够
2. 手机号码验证(中国大陆)
中国大陆手机号通常为 11 位,以 1 开头,第二位通常是 3-9。
// 匹配主流运营商号码段
const phoneRegex = /^1[3-9]d{9}$/;
示例:
if (phoneRegex.test(“13812345678”)) {
console.log(“手机号有效”);
}
// 可根据需要扩展虚拟运营商号段(如 170、171 等)
3. 密码强度校验
安全密码通常要求包含大小写字母、数字、特殊字符中的至少三项,且长度不少于8位。
// 分步检查更清晰
function validatePassword(pwd) {
let count = 0;
if (/(?=.*[a-z])/.test(pwd)) count++;
if (/(?=.*[A-Z])/.test(pwd)) count++;
if (/(?=.*d)/.test(pwd)) count++;
if (/(?=.*[@$!%*?&])/.test(pwd)) count++;
return pwd.length >= 8 && count >= 3;
}
调用:
validatePassword(“MyPass123!”) → true
4. 身份证号码校验(18位)
中国大陆身份证为18位,前17位为数字,最后一位可能是数字或X。
Vizard
AI驱动的视频编辑器
101 查看详情
// 简化版正则,适用于基本格式校验
const idCardRegex = /^[1-9]d{5}[1-9]d{3}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}(d|X)$/;
说明:
– 前6位:地区编码
– 中间8位:出生年月日
– 后4位:顺序码与校验码
// 如需严格校验,建议结合算法验证出生日期和校验位
5. 中文姓名验证
中文姓名通常由2-4个汉字组成,允许复姓或双名。
const nameRegex = /^[u4e00-u9fa5]{2,4}$/;
使用:
nameRegex.test(“张三”) → true
nameRegex.test(“欧阳小明”) → true
nameRegex.test(“Li”) → false
6. URL 地址校验
验证用户输入的是否为合法网址,支持 http/https。
const urlRegex = /^https?://(?:[-w.]|(?:%[da-fA-F]{2}))+/;
注意点:
– 必须以 http:// 或 https:// 开头
– 不强制完整域名结构,避免过于复杂
进阶可使用更完整的正则或浏览器内置 URL 构造函数辅助判断。
基本上就这些。正则表达式虽强大,但也别过度依赖复杂模式。结合语义判断和用户体验,分步校验往往更可靠。实际开发中,建议配合 HTML5 的 input 类型(如 type=”email”)和 required 属性,再用 JS 正则做深度控制,效果更佳。
以上就是JS正则表达式实战_表单验证技巧合集的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/870842.html
微信扫一扫
支付宝扫一扫