JS正则表单验证实用技巧分享

掌握JS正则表单验证技巧，提升前端开发效率！表单验证是前端开发中至关重要的一环，本文整理了常见场景下的 JavaScript 正则表达式 (RegExp) 验证技巧，助你高效校验用户输入的格式是否合规。文章涵盖邮箱、手机号、密码、身份证、中文姓名和URL地址等常见字段的验证，例如，邮箱验证使用基础正则`/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/`，手机号用`/^1[3-9]\d{9}$/`匹配大陆主流号段。同时，强调结合HTML5表单属性与JS正则，以提升校验的可靠性。通过学习本文，开发者可以快速上手，在实际项目中灵活运用，构建更安全、更友好的用户体验。

邮箱验证使用基础正则 /^[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}((0\d)|(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("手机号有效");
}

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。

const idCardRegex = /^[1-9]\d{5}[1-9]\d{3}((0\d)|(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 正则做深度控制，效果更佳。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~