前端JS常用正则

一、前端常用正则表达式大全

1. 手机号码校验（中国大陆）

const phoneRegex = /^1[3-9]\d{9}$/;

// 使用示例
console.log(phoneRegex.test('17312345678')); // true
console.log(phoneRegex.test('12312345678')); // false (第二位不是3-9)

✅ 说明：

^1：以1开头
[3-9]：第二位是3到9之间的数字（符合国内手机号规则）
\d{9}：后面跟9位数字
$：字符串结尾
📌 注意：不同国家手机号规则不同，需根据业务需求调整。

2. 邮箱地址校验

const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

// 使用示例
console.log(emailRegex.test('user@qq.com')); // true
console.log(emailRegex.test('invalid.email'));   // false

✅ 说明：

^[a-zA-Z0-9._%+-]+：用户名部分，支持字母、数字及常见符号
@：必须包含@符号
[a-zA-Z0-9.-]+：域名部分
\.：点号需要转义
[a-zA-Z]{2,}：顶级域名至少2个字母（如com、org、cn等）
⚠️ 提示：完整的邮箱校验非常复杂，此正则适用于大多数场景，如需严格校验建议结合后端验证。

3. 身份证号码校验（18位）

const idCardRegex = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))\d{3}(\d|X|x)$/;

// 使用示例
console.log(idCardRegex.test('110101199003072315')); // true
console.log(idCardRegex.test('110101199013072315')); // false (月份错误)

✅ 说明：

前6位：地区码
(18|19|20)\d{2}：年份（1800-2099）
月份和日期部分做了基本范围限制
最后一位可能是X（校验码）
🔍 扩展：实际项目中建议结合算法校验最后一位校验码，确保准确性。

4. 弱密码校验（至少6位，包含字母和数字）

const passwordRegex = /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/;

// 使用示例
console.log(passwordRegex.test('abc123'));     // true
console.log(passwordRegex.test('password'));   // false (无数字)
console.log(passwordRegex.test('123456'));     // false (无字母)

✅ 说明：

(?=.*[a-zA-Z])：正向先行断言，确保包含至少一个字母
(?=.*\d)：确保包含至少一个数字
[a-zA-Z\d]{6,}：总长度至少6位，仅允许字母和数字
🔐 建议：可根据安全需求增加特殊字符、大小写混合等规则。

5. URL地址校验

const urlRegex = /^https?:\/\/[^\s$.?#].[^\s]*$/;

// 更严格的版本（推荐）
const strictUrlRegex = /^https?:\/\/(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}(?:\/[^\s]*)?$/;

// 使用示例
console.log(strictUrlRegex.test('https://www.youkuaiyun.com')); // true
console.log(strictUrlRegex.test('http://localhost:3000')); // true
console.log(strictUrlRegex.test('not-a-url'));            // false

✅ 说明：

https?：支持http和https
(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}：域名部分
(?:\/[^\s]*)?：可选的路径部分
🌐 注意：本地开发环境（如localhost）也应被支持。

6. 中文字符匹配

const chineseRegex = /[\u4e00-\u9fa5]/;

// 匹配纯中文字符串
const pureChineseRegex = /^[\u4e00-\u9fa5]+$/;

// 使用示例
console.log(chineseRegex.test('你好'));       // true
console.log(pureChineseRegex.test('Hello'));  // false

✅ 说明：

\u4e00-\u9fa5：Unicode编码范围，覆盖常用汉字
📝 用途：昵称、姓名校验，或过滤非中文内容。

7. 数字（整数或小数）

const numberRegex = /^-?\d+(\.\d+)?$/;

// 使用示例
console.log(numberRegex.test('123'));     // true
console.log(numberRegex.test('-45.67'));  // true
console.log(numberRegex.test('abc'));     // false

✅ 说明：

-?：可选负号
\d+：至少一位整数
(\.\d+)?：可选的小数部分

8. 日期格式校验（YYYY-MM-DD）

const dateRegex = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;

// 使用示例
console.log(dateRegex.test('2025-09-25')); // true
console.log(dateRegex.test('2025-13-01')); // false

✅ 说明：

仅做格式校验，不判断日期是否存在（如2月30日）
如需完整校验，建议结合 Date 对象

二、封装成工具函数（推荐）

const Validators = {
  isPhone: (str) => /^1[3-9]\d{9}$/.test(str),
  isEmail: (str) => /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(str),
  isIdCard: (str) => /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))((0[1-9])|([1-2]\d)|(3[0-1]))\d{3}(\d|X|x)$/.test(str),
  isPassword: (str) => /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{6,}$/.test(str)
};

// 使用
console.log(Validators.isEmail('test@qq.com')); // true