Web 前端常用正则校验规则整理(常用示例)

2023-12-05 0 1,029
目录
  • Web 前端常用正则校验规则
  • 1. 校验手机号码
  • 2. 校验邮箱地址
  • 3. 校验身份证号码
  • 4. 校验密码强度
  • 5. 校验 URL 地址
  • 6. 校验邮政编码
  • 7. 校验 IP 地址
  • 8. 校验护照号码

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 前端常用正则校验规则整理(常用示例)的文章就介绍到这了,更多相关正则校验规则 内容请搜索悠久资源网以前的文章或继续浏览下面的相关文章希望大家以后多多支持悠久资源网!

您可能感兴趣的文章:

  • Java中@Pattern注解常用的校验正则表达式学习笔记
  • JavaScript正则表达式实现注册信息校验功能
  • js正则表达式简单校验方法
  • javascript使用正则表达式实现注册登入校验
  • js正则表达式校验指定字符串的方法
  • JS正则表达式完美实现身份证校验功能

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悠久资源 正则表达式 Web 前端常用正则校验规则整理(常用示例) https://www.u-9.cn/biancheng/zhengze/95214.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务