Web 前端常用正则校验规则整理(常用示例)
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li><a href="#_label0">Web 前端常用正则校验规则</a></li><li><a href="#_label1">1. 校验手机号码</a></li><li><a href="#_label2">2. 校验邮箱地址</a></li><li><a href="#_label3">3. 校验身份证号码</a></li><li><a href="#_label4">4. 校验密码强度</a></li><li><a href="#_label5">5. 校验 URL 地址</a></li><li><a href="#_label6">6. 校验邮政编码</a></li><li><a href="#_label7">7. 校验 IP 地址</a></li><li><a href="#_label8">8. 校验护照号码</a></li></ul></div><p class="maodian"><a name="_label0"></a></p><h2>Web 前端常用正则校验规则</h2><p>作为 Web 前端开发，常用的正则校验规则有很多。下面是一些常见的示例：</p>
<p class="maodian"><a name="_label1"></a></p><h2>1. 校验手机号码</h2>
<p>手机号码的正则表达式可以根据不同国家和地区的手机号码格式进行调整。以下是中国大陆的手机号码正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^1\d{9}$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^1\d{9}$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code>1</code> 表示必须以数字 1 开头。</li><li><code></code> 表示第二位必须是 3、4、5、6、7、8 或 9 中的一个。</li><li><code>\d{9}</code> 表示后面必须跟着 9 个数字。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p class="maodian"><a name="_label2"></a></p><h2>2. 校验邮箱地址</h2>
<p>邮箱地址的正则表达式可以根据不同的邮箱服务提供商进行调整。以下是一个通用的邮箱地址正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code>\w+</code> 表示必须以一个或多个字母、数字或下划线开头。</li><li><code>([-+.]\w+)*</code> 表示可以包含一个或多个连字符、加号或点号，后面跟着一个或多个字母、数字或下划线。</li><li><code>@</code> 表示必须包含一个 @ 符号。</li><li><code>\w+</code> 表示必须包含一个或多个字母、数字或下划线。</li><li><code>([-.]\w+)*</code> 表示可以包含一个或多个连字符或点号，后面跟着一个或多个字母、数字或下划线。</li><li><code>\.</code> 表示必须包含一个点号。</li><li><code>\w+</code> 表示必须包含一个或多个字母、数字或下划线。</li></ul>
<p class="maodian"><a name="_label3"></a></p><h2>3. 校验身份证号码</h2>
<p>身份证号码的正则表达式可以根据不同的国家和地区进行调整。以下是中国大陆身份证号码的正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex =
/^\d{5}(19|20)\d{2}(0|1)(0|\d|3)\d{3}$/;
// 身份证号码为15位或18位，15位时全为数字，18位前17位为数字，最后一位是校验位，可能为数字或字符X
// const regex = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;</pre></div>
<p>在这个示例中，正则表达式 <code>^\d{5}(19|20)\d{2}(0|1)(0|\d|3)\d{3}$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code></code> 表示第一位必须是 1 到 9 中的一个。</li><li><code>\d{5}</code> 表示后面必须跟着 5 个数字。</li><li><code>(19|20)</code> 表示第七到第十位必须是 19 或 20。</li><li><code>\d{2}</code> 表示第十一到第十二位必须是一个两位数字。</li><li><code>(0|1)</code> 表示第十三到第十四位必须是 01 到 12 中的一个。</li><li><code>(0|\d|3)</code> 表示第十五到第十六位必须是 01 到 31 中的一个。</li><li><code>\d{3}</code> 表示第十七到第十九位必须是三个数字。</li><li><code></code> 表示最后一位可以是数字或大写字母 X。</li></ul>
<p class="maodian"><a name="_label4"></a></p><h2>4. 校验密码强度</h2>
<p>校验密码强度通常需要考虑密码的长度、字符类型和组合方式等因素。以下是一个简单的密码强度正则表达式，要求密码长度为 6 到 20 个字符，且必须包含字母和数字：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^(?=.*)(?=.*)({6,20})$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^(?=.*)(?=.*)({6,20})$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code>(?=.*)</code> 表示必须包含至少一个数字。</li><li><code>(?=.*)</code> 表示必须包含至少一个字母。</li><li><code>({6,20})</code> 表示密码长度必须为 6 到 20 个字符，且只能包含字母和数字。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p class="maodian"><a name="_label5"></a></p><h2>5. 校验 URL 地址</h2>
<p>校验 URL 地址通常需要考虑 URL 的协议、主机名、端口和路径等部分。以下是一个简单的 URL 校验正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^(http|https):\/\/([\w-]+\.)+[\w-]+(:\d+)?(\/\S*)?$/;
// const regex =
// /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^(http|https):\/\/([\w-]+\.)+[\w-]+(:\d+)?(\/\S*)?$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code>(http|https)</code> 表示必须以 http 或 https 开头。</li><li><code>:\/\/</code> 表示匹配冒号和双斜杠。</li><li><code>([\w-]+\.)+[\w-]+</code> 表示匹配主机名，必须包含至少一个连字符或字母，后面跟着一个或多个字母、数字或连字符。</li><li><code>(:\d+)?</code> 表示匹配可选的端口号，必须以冒号和一个或多个数字结尾。</li><li><code>(\/\S*)?</code> 表示匹配可选的路径，必须以斜杠开头，后面可以跟任意非空白字符。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p>当然，还有一些其他常用的正则校验规则，例如：</p>
<p class="maodian"><a name="_label6"></a></p><h2>6. 校验邮政编码</h2>
<p>邮政编码的正则表达式可以根据不同的国家和地区进行调整。以下是中国大陆邮政编码的正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^\d{5}$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^\d{5}$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code></code> 表示第一位必须是 1 到 9 中的一个。</li><li><code>\d{5}</code> 表示后面必须跟着 5 个数字。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p class="maodian"><a name="_label7"></a></p><h2>7. 校验 IP 地址</h2>
<p>IP 地址的正则表达式可以根据不同的 IP 地址格式进行调整。以下是一个简单的 IPv4 地址校验正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex =
/^(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)\.(?\d{1,2}|2\d|25)$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code>(?\d{1,2}|2\d|25)</code> 表示匹配 0 到 255 之间的数字。</li><li><code>\.</code>表示匹配点号。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p class="maodian"><a name="_label8"></a></p><h2>8. 校验护照号码</h2>
<p>以下是中国大陆护照号码的正则表达式：</p>
<div class="jb51code"><pre class="brush:plain;">const regex = /^\d{8}$/;</pre></div>
<p>在这个示例中，正则表达式 <code>^\d{8}$</code> 表示：</p>
<ul><li><code>^</code> 表示匹配字符串的开头。</li><li><code></code> 表示第一位必须是大写字母 E 或 G，或小写字母 e 或 g 中的一个。</li><li><code>\d{8}</code> 表示后面必须跟着 8 个数字。</li><li><code>$</code> 表示匹配字符串的结尾。</li></ul>
<p>需要注意的是，以上示例只是常用的正则校验规则之一，实际应用中可能需要根据具体的业务需求进行调整和优化。同时，正则表达式的编写也需要考虑到性能和可读性等方面的因素。</p>
頁:
[1]