JavaScript 表单验证常用正则表达式汇总与实战

作者:闭包旅人

时间:2026-10-23

浏览:322

本文整理了一套适用于 JavaScript 表单验证的正则表达式集合,涵盖中文字符、双字节字符、空白行、HTML 标记、Email、URL、身份证号、IP 地址及各类数字字符串的匹配规则。文章提供了具体的正则表达式写法、评注说明以及在实际开发中的应用场景,如计算字符串长度、去除首尾空格、IP 地址转换及限制文本框输入等实用代码示例,帮助开发者快速实现前端数据校验。

文章目录

JavaScript 表单验证正则表达式汇总

关于正则表达式与具体函数结合使用的详细示例,请参阅后续文章 JavaScript 使用正则表达式进行表单验证的示例代码。

具体代码实现如下:

匹配中文字符的正则表达式为:[u4e00-u9fa5]
评注:匹配中文内容一直是开发中的难点,引入此表达式可有效简化处理流程。
匹配双字节字符(包含汉字)的正则表达式为:[^x00-xff]
评注:该表达式可用于计算字符串长度,其中双字节字符计为 2,ASCII 字符计为 1。
匹配空白行的正则表达式为:ns*r
评注:此表达式可用于批量删除文档中的空白行。
匹配 HTML 标记的正则表达式为:< (S*?)[^>]*>.*?|< .*? />
评注:网上流传的许多版本存在缺陷,上述表达式仅能匹配部分简单情况,面对复杂的嵌套标记时仍显力不从心。
匹配首尾空白字符的正则表达式为:^s*|s*$
评注:该表达式非常实用,可用于删除行首和行尾的空白字符,包括空格、制表符及换页符等。
匹配 Email 地址的正则表达式为:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
评注:在表单验证场景中,此表达式具有极高的实用价值。
匹配网址 URL 的正则表达式为:[a-zA-z]+://[^s]*
评注:相较于网上流传的功能受限的版本,上述表达式已基本满足常规需求。
匹配账号合法性(字母开头,允许 5-16 字节,支持字母、数字及下划线)的正则表达式为:^[a-zA-Z][a-zA-Z0-9_]{4,15}$
评注:在表单验证环节中,此规则非常实用。
匹配国内电话号码的正则表达式为:d{3}-d{8}|d{4}-d{7}
评注:该表达式适用于匹配如 0511-4405222 或 021-87888822 等格式的号码。
匹配腾讯 QQ 号的正则表达式为:[1-9][0-9]{4,}
评注:腾讯 QQ 号的起始编号为 10000。
匹配中国邮政编码的正则表达式为:[1-9]d{5}(?!d)
评注:中国邮政编码由 6 位数字组成。
匹配身份证号的正则表达式为:d{15}|d{18}
评注:中国身份证号码长度为 15 位或 18 位。
匹配 IP 地址的正则表达式为:d+.d+.d+.d+
评注:在提取 IP 地址时,此表达式十分有用。
特定数字匹配规则匹配特定数字的表达式如下:
^[1-9]d*$ //匹配正整数
^-[1-9]d*$ //匹配负整数
^-?[1-9]d*$ //匹配整数
^[1-9]d*|0$ //匹配非负整数(正整数 + 0)
^-[1-9]d*|0$ //匹配非正整数(负整数 + 0)
^[1-9]d*.d*|0.d*[1-9]d*$ //匹配正浮点数
^-([1-9]d*.d*|0.d*[1-9]d*)$ //匹配负浮点数
^-?([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ //匹配浮点数
^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //匹配非负浮点数(正浮点数 + 0)
^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ //匹配非正浮点数(负浮点数 + 0)
评注:处理大量数据时此组表达式非常有用,具体应用时需注意根据实际需求进行修正。
特定字符串匹配规则匹配特定字符串的表达式如下:
^[A-Za-z]+$ //匹配由 26 个英文字母组成的字符串
^[A-Z]+$ //匹配由 26 个英文字母的大写组成的字符串
^[a-z]+$ //匹配由 26 个英文字母的小写组成的字符串
^[A-Za-z0-9]+$ //匹配由数字和 26 个英文字母组成的字符串
^w+$ //匹配由数字、26 个英文字母或者下划线组成的字符串
RegularExpressionValidator 验证表达式在使用 RegularExpressionValidator 验证控件时,相关的验证功能及其验证表达式介绍如下:
只能输入数字:“^[0-9]*$”
只能输入 n 位的数字:“^d{n}$”
只能输入至少 n 位数字:“^d{n,}$”
只能输入 m-n 位的数字:“^d{m,n}$”
只能输入零和非零开头的数字:“^(0|[1-9][0-9]*)$”
只能输入有两位小数的正实数:“^[0-9]+(.[0-9]{2})?$”
只能输入有 1-3 位小数的正实数:“^[0-9]+(.[0-9]{1,3})?$”
只能输入非零的正整数:“^+?[1-9][0-9]*$”
只能输入非零的负整数:“^-[1-9][0-9]*$”
只能输入长度为 3 的字符:“^.{3}$”
只能输入由 26 个英文字母组成的字符串:“^[A-Za-z]+$”
只能输入由 26 个大写英文字母组成的字符串:“^[A-Z]+$”
只能输入由 26 个小写英文字母组成的字符串:“^[a-z]+$”
只能输入由数字和 26 个英文字母组成的字符串:“^[A-Za-z0-9]+$”
只能输入由数字、26 个英文字母或者下划线组成的字符串:“^w+$”
验证用户密码:“^[a-zA-Z]w{5,17}$”,正确格式为:以字母开头,长度在 6-18 之间,
只能包含字符、数字和下划线。
验证是否含有 ^%&',;=?$" 等字符:“[^%&',;=?$x22]+”
只能输入汉字:“^[u4e00-u9fa5],{0,}$”
验证 Email 地址:“^w+[-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$”
验证 Internet URL:“^http://([w-]+.)+[w-]+(/[w-./?%&=]*)?$”
验证电话号码:“^((d{3,4})|d{3,4}-)?d{7,8}$”
正确格式为:“XXXX-XXXXXXX”,“XXXX-XXXXXXXX”,“XXX-XXXXXXX”,
“XXX-XXXXXXXX”,“XXXXXXX”,“XXXXXXXX”。
验证身份证号(15 位或 18 位数字):“^d{15}|d{}18$”
验证一年的 12 个月:“^(0?[1-9]|1[0-2])$”,正确格式为:“01”-“09”和“1”“12”
验证一个月的 31 天:“^((0?[1-9])|((1|2)[0-9])|30|31)$”
正确格式为:“01”“09”和“1”“31”。
常见正则表达式回顾匹配中文字符的正则表达式: [u4e00-u9fa5]
匹配双字节字符(包括汉字在内):[^x00-xff]
匹配空行的正则表达式:n[s| ]*r
匹配 HTML 标记的正则表达式:/< (.*)>.*|< (.*) />/
匹配首尾空格的正则表达式:(^s*)|(s*$)
匹配 Email 地址的正则表达式:w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*
匹配网址 URL 的正则表达式:http://([w-]+.)+[w-]+(/[w- ./?%&=]*)?
正则表达式在实际应用中的代码示例(1) 应用:计算字符串的长度(一个双字节字符长度计 2,ASCII 字符计 1)
String.prototype.len=function(){return this.replace([^x00-xff]/g,"aa").length;}
(2) 应用:javascript 中没有像 vbscript 那样的 trim 函数,我们就可以利用这个表达式来实现
String.prototype.trim = function()
{ 
return this.replace(/(^s*)|(s*$)/g, "");
} 
(3) 应用:利用正则表达式分解和转换 IP 地址
function IP2V(ip) //IP 地址转换成对应数值
{ 
re=/(d+).(d+).(d+).(d+)/g //匹配 IP 地址的正则表达式
if(re.test(ip))
{ 
return RegExp.$1*Math.pow(255,3))+RegExp.$2*Math.pow(255,2))+RegExp.$3*255+RegExp.$4*1
} 
else
{ 
throw new Error("Not a valid IP address!")
} 
} 
(4) 应用:从 URL 地址中提取文件名的 javascript 程序
s="https://www.jb51.net/page1.htm";
s=s.replace(/(.*/){0,}([^.]+).*/ig,"$2") ; //Page1.htm
(5) 应用:利用正则表达式限制网页表单里的文本框输入内容
用正则表达式限制只能输入中文:onkeyup="value="/blog/value.replace(/["^u4E00-u9FA5]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^u4E00-u9FA5]/g,''))"
用正则表达式限制只能输入全角字符: onkeyup="value="/blog/value.replace(/["^uFF00-uFFFF]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^uFF00-uFFFF]/g,''))"
用正则表达式限制只能输入数字:onkeyup="value="/blog/value.replace(/["^d]/g,'') "onbeforepaste= "clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''))"
用正则表达式限制只能输入数字和英文:onkeyup="value="/blog/value.replace(/[W]/g,"'') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^d]/g,''

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章