平时做技术实践时，很多问题不是概念不会，而是细节没串起来。拿“Web 前端常用正则校验规则整理(常用示例)”来说，它看着像小点，放到项目里常会牵出环境、配置、兼容性和维护成本。下面按实际采用顺序，把思路、关键写法和容易踩坑的地方讲清楚，便于大家直接对照操作。

Web 前端常用正则校验规则

落到代码里，作为 Web 前端开发，常用的正则校验规则有很多。下面是一些常用的示例：

1. 校验手机号码

结合项目来看，手机号码的正则表达式能够根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式：

const regex = /^1[3456789]d{9}$/;

在这个示例里，正则表达式 ^1[3456789]d{9}$ 表示：

• ^ 表示匹配字符串的开头。
• 1 表示必须以数字 1 开头。
• [3456789] 表示第二位必须是 3、4、5、6、7、8 或 9 中的一个。
• d{9} 表示后面必须跟着 9 个数字。
• $ 表示匹配字符串的结尾。

2. 校验邮箱地址

在这个场景下，邮箱地址的正则表达式能够根据不同的邮箱服务提供商进行调整。以下是一个通用的邮箱地址正则表达式：

const regex = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;

在这个示例里，正则表达式 ^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$ 表示：

• ^ 表示匹配字符串的开头。
• w+ 表示必须以一个或多个字母、数字或下划线开头。
• ([-+.]w+)* 表示能够包含一个或多个连字符、加号或点号，后面跟着一个或多个字母、数字或下划线。
• @ 表示必须包含一个 @ 符号。
• w+ 表示必须包含一个或多个字母、数字或下划线。
• ([-.]w+)* 表示能够包含一个或多个连字符或点号，后面跟着一个或多个字母、数字或下划线。
• . 表示必须包含一个点号。
• w+ 表示必须包含一个或多个字母、数字或下划线。

3. 校验身份证号码

结合项目来看，身份证号码的正则表达式能够根据不同的国家和地区进行调整。以下是中国大陆身份证号码的正则表达式：

const regex =
  /^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$/;
// 身份证号码为15位或18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
// const regex = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;

在这个示例里，正则表达式 ^[1-9]d{5}(19|20)d{2}(0[1-9]|1[012])(0[1-9]|[12]d|3[01])d{3}[0-9Xx]$ 表示：

• ^ 表示匹配字符串的开头。
• [1-9] 表示第一位必须是 1 到 9 中的一个。
• d{5} 表示后面必须跟着 5 个数字。
• (19|20) 表示第七到第十位必须是 19 或 20。
• d{2} 表示第十一到第十二位必须是一个两位数字。
• (0[1-9]|1[012]) 表示第十三到第十四位必须是 01 到 12 中的一个。
• (0[1-9]|[12]d|3[01]) 表示第十五到第十六位必须是 01 到 31 中的一个。
• d{3} 表示第十七到第十九位必须是三个数字。
• [0-9Xx] 表示最后一位能够是数字或大写字母 X。

4. 校验密码强度

实际处理时，校验密码强度通常需考虑密码的长度、字符类型和组合方式等因素。以下是一个轻松的密码强度正则表达式，要求密码长度为 6 到 20 个字符，且必须包含字母和数字：

const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$/;

在这个示例里，正则表达式 ^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,20})$ 表示：

• ^ 表示匹配字符串的开头。
• (?=.*[0-9]) 表示必须包含至少一个数字。
• (?=.*[a-zA-Z]) 表示必须包含至少一个字母。
• ([a-zA-Z0-9]{6,20}) 表示密码长度必须为 6 到 20 个字符，且只能包含字母和数字。
• $ 表示匹配字符串的结尾。

5. 校验 URL 地址

在这个场景下，校验 URL 地址通常需考虑 URL 的协议、主机名、端口和路径等部分。以下是一个轻松的 URL 校验正则表达式：

const regex = /^(http|https)://([w-]+.)+[w-]+(:d+)?(/S*)?$/;
// const regex =
//   /(((^https?:(?://)?)(?:[-;:&=+$,w]+@)?[A-Za-z0-9.-]+(?::d+)?|(?:www.|[-;:&=+$,w]+@)[A-Za-z0-9.-]+)((?:/[+~%/.w-_]*)???(?:[-+=&;%@.w_]*)#?(?:[w]*))?)$/;

在这个示例里，正则表达式 ^(http|https)://([w-]+.)+[w-]+(:d+)?(/S*)?$ 表示：

• ^ 表示匹配字符串的开头。
• (http|https) 表示必须以 http 或 https 开头。
• :// 表示匹配冒号和双斜杠。
• ([w-]+.)+[w-]+ 表示匹配主机名，必须包含至少一个连字符或字母，后面跟着一个或多个字母、数字或连字符。
• (:d+)? 表示匹配可选的端口号，必须以冒号和一个或多个数字结尾。
• (/S*)? 表示匹配可选的路径，必须以斜杠开头，后面能够跟任意非空白字符。
• $ 表示匹配字符串的结尾。

当然，还有一些其他常用的正则校验规则，比如：

6. 校验邮政编码

结合项目来看，邮政编码的正则表达式能够根据不同的国家和地区进行调整。以下是中国大陆邮政编码的正则表达式：

const regex = /^[1-9]d{5}$/;

在这个示例里，正则表达式 ^[1-9]d{5}$ 表示：

• ^ 表示匹配字符串的开头。
• [1-9] 表示第一位必须是 1 到 9 中的一个。
• d{5} 表示后面必须跟着 5 个数字。
• $ 表示匹配字符串的结尾。

7. 校验 IP 地址

结合项目来看，IP 地址的正则表达式能够根据不同的 IP 地址格式进行调整。以下是一个轻松的 IPv4 地址校验正则表达式：

const regex =
  /^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$/;

在这个示例里，正则表达式 ^([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5]).([01]?d{1,2}|2[0-4]d|25[0-5])$ 表示：

• ^ 表示匹配字符串的开头。
• ([01]?d{1,2}|2[0-4]d|25[0-5]) 表示匹配 0 到 255 之间的数字。
• .表示匹配点号。
• $ 表示匹配字符串的结尾。

8. 校验护照号码

以下是中国大陆护照号码的正则表达式：

const regex = /^[EeGg]d{8}$/;

在这个示例里，正则表达式 ^[EeGg]d{8}$ 表示：

• ^ 表示匹配字符串的开头。
• [EeGg] 表示第一位必须是大写字母 E 或 G，或小写字母 e 或 g 中的一个。
• d{8} 表示后面必须跟着 8 个数字。
• $ 表示匹配字符串的结尾。

在这个场景下，这里需留意，以上示例只是常用的正则校验规则之一，实际应用中可能需根据具体的业务需求进行调整和优化。同时，正则表达式的编写也需考虑到性能和可读性等方面的因素。

到此这篇关于Web 前端常用正则校验规则整理(常用示例)的文章就介绍到这了,更多相关正则校验规则 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多兼容脚本之家！