当前位置：首页 > 全部内容 > 正文

JavaScript正则表达式基础语法与常用校验实例详解

作者：半夏

时间：2026-10-29

浏览：599

本文系统讲解JavaScript中正则表达式的基本语法，涵盖边界符、量词、字符集及转义规则，并汇总了登录名、密码、邮箱、URL等常见场景的校验正则与JS实现代码，帮助开发者快速掌握字符串匹配技巧。

文章目录

（推荐）JS正则知识点专题：https://www.jb51.net/article/139831.htm

1.正则表达式基本语法

正则表达式中两个特殊符号'^'和'$'分别用于标识字符串的起始和结束位置。

示例如下：

"^The"匹配以"The"开头的字符串（如"There"、"The cat"等）；

"of despair$"匹配以"of despair"结尾的字符串；

"^abc$"匹配仅包含"abc"的完整字符串；

"notice"匹配包含"notice"子串的任意位置。

若不使用边界符，正则表达式将在被搜索字符串的任意位置进行匹配，而非限定于特定起始或结束位置。

符号'*'、'+'和'?'分别表示字符或序列重复出现的次数限制。

它们分别对应“零次或多次”、“一次或多次”以及“零次或一次”。

具体示例如下：

"ab*"匹配一个'a'后跟零个或多个'b'（如"a"、"ab"、"abbb"等）；

"ab+"匹配一个'a'后跟至少一个'b'；

"ab?"匹配一个'a'后跟零个或一个'b'；

"a?b+$"匹配以零个或一个'a'后跟一个或多个'b'结尾的字符串。

可以使用大括号指定重复次数的范围。

"ab{2}"匹配一个'a'后跟恰好两个'b'（即"abb"）；

"ab{2,}"匹配一个'a'后跟至少两个'b'；

"ab{3,5}"匹配一个'a'后跟3到5个'b'。

注意必须指定范围下限（如"{0,2}"而非"{,2}"）。

此外，'*'、'+'和'?'分别等价于"{0,}"、"{1,}"和"{0,1}"。

符号'¦'表示逻辑“或”操作：

"hi¦hello"匹配包含"hi"或"hello"的字符串；

"(b¦cd)ef"匹配"bef"或"cdef"；

"(a¦b)*c"匹配由零个或多个'a'或'b'组成后跟一个'c'的字符串。

'.'用于匹配除换行符外的任意单个字符：

"a.[0-9]"匹配一个'a'后跟任意字符及一个数字；

"^.{3}$"匹配长度为3的任意字符串。

方括号用于定义特定位置允许的字符集合：

"[ab]"匹配包含'a'或'b'的字符串（等同于"a¦b"）；

"[a-d]"匹配包含'a'到'd'范围内小写字母的字符串；

"^[a-zA-Z]"匹配以字母开头的字符串；

"[0-9]%"匹配数字后跟百分号的字符串；

",[a-zA-Z0-9]$"匹配以逗号后接字母或数字结尾的字符串。

方括号内使用'^'表示排除该字符集，且'^'需位于方括号首位。

例如"%[^a-zA-Z]%"匹配两个百分号之间不含字母的字符串。

需逐字匹配'^'、'.'、'$'、'('、')'、'¦'、'*'、'+'、'?'、'{'、'"'等特殊字符时，需在其前添加转义字符'\'。

注意方括号内的特殊字符无需转义。

2.正则表达式验证控制文本框的输入字符类型

1.只能输入数字和英文的：


<input onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text1" NAME="Text1">

2.只能输入数字的：


<input onkeyup="value=value.replace(/[^\d]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))" ID="Text2" NAME="Text2">

3.只能输入全角的：


<input onkeyup="value=value.replace(/[^\uFF00-\uFFFF]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\uFF00-\uFFFF]/g,''))" ID="Text3" NAME="Text3">

4.只能输入汉字的：


<input onkeyup="value=value.replace(/[^\u4E00-\u9FA5]/g,'')" onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\u4E00-\u9FA5]/g,''))" ID="Text4" NAME="Text4">

3.正则表达式的应用实例通俗说明

*******************************************************************************

//校验是否全由数字组成

/^[0-9]{1,20}$/

^表示匹配紧跟其后的规则作为字符串开头

$表示匹配紧靠其前的规则作为字符串结尾

[ ]内的内容表示可选字符集

[0-9]要求字符范围在0到9之间

{1,20}表示数字字符串长度合法为1到20，即[0-9]中的字符出现次数范围为1到20次。

/^ 和 $/成对使用表示要求整个字符串完全匹配定义的规则，而非仅匹配子串。

*******************************************************************************

//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串

/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/

^[a-zA-Z]{1}表示首字符必须为字母。

([a-zA-Z0-9]|[._]){4,19}表示从第二位开始长度为4到19位的字符串，由大小写字母、数字或特殊字符[._]组成。

*******************************************************************************

//校验用户姓名：只能输入1-30个以字母开头的字串

/^[a-zA-Z]{1,30}$/

*******************************************************************************

//校验密码：只能输入6-20个字母、数字、下划线

/^(\w){6,20}$/

\w用于匹配字母、数字或下划线字符

*******************************************************************************

//校验普通电话、传真号码：可以“+”或数字开头，可含有“-” 和 “ ”

/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/

\d用于匹配0到9的数字；

“?”元字符规定其前导对象必须在目标对象中连续出现零次或一次

可匹配字符串如：+123 -999 999 ； +123-999 999 ；123 999 999 ；+123 999999等

******************************************************************************* //校验URL

/^http[s]{0,1}:\/\/.+$\/ 或 /^http[s]{0,1}:\/\/.{1,n}$\/ (表示url串的长度为length(“https://”) + n ) \ / ：表示字符“/”。

.表示所有字符的集

+等同于{1,}，即1到正无穷。

 *******************************************************************************

//校验纯中文字符 /

^[\u4E00-\u9FA5]+$

[\u4E00-\u9FA5] ：估计是中文字符集的范围吧

以上表达式均在下面的javascript中测试通过


<html>
<script language="JavaScript">
<!--
function regx(r,s)
{
  if (r == null || r == ""){
    return false;
  }
  var patrn= new RegExp(r);
  if (patrn.exec(s))
    return true
  return false
}
 
-->
</script>
<body>
<form>

规则表达式 ：


 <input type="input" name="regxStr" value="" > (填写/ /之间的表达式)
<br>

校验字符串 ：


 <input type="input" name="str" value="" >
  <input type="button" name="match" value="匹配" onClick="alert(regx(regxStr.value,str.value));">
</form>
</body>
</html>

4.正則表達式應用

"^\d+$" //非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$" //正整数

"^((-\d+)|(0+))$" //非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$" //负整数

"^-?\d+$" //整数

"^\d+(\.\d+)?$" //非负浮点数（正浮点数 + 0）

"^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数

"^((-\d+(\.\d+)?)|(0+(\.0+)?))$" //非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数

"^(-?\d+)(\.\d+)?$" //浮点数

"^[A-Za-z]+$" //由26个英文字母组成的字符串

"^[A-Z]+$" //由26个英文字母的大写组成的字符串

"^[a-z]+$" //由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串

"^\w+$" //由数字、26个英文字母或者下划线组成的字符串

"^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$" //email地址

"^[a-zA-z]+://(\w+(-\w+)*)(\.(\w+(-\w+)*))*(\?\S*)?$" //url

/^(d{2}|d{4})-((0([1-9]{1}))|(1[1|2]))-(([0-2]([1-9]{1}))|(3[0|1]))$/ // 年-月-日

/^((0([1-9]{1}))|(1[1|2]))/(([0-2]([1-9]{1}))|(3[0|1]))/(d{2}|d{4})$/ // 月/日/年

"^([w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$" //Emil

"(d+-)?(d{4}-?d{7}|d{3}-?d{8}|^d{7,8})(-d+)?" //电话号码

"^(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5]).(d{1,2}|1dd|2[0-4]d|25[0-5])$" //IP地址

^([0-9A-F]{2})(-[0-9A-F]{2}){5}$ //MAC地址的正则表达式

^[-+]?\d+(\.\d+)?$ //值类型正则表达式

5.javascript正则表达式检验

//校验是否全由数字组成


function isDigit(s)
{
var patrn=/^[0-9]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验登录名：只能输入5-20个以字母开头、可带数字、“_”、“.”的字串


function isRegisterUserName(s)
{
var patrn=/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
if (!patrn.exec(s)) return false
return true
}

//校验用户姓名：只能输入1-30个以字母开头的字串


function isTrueName(s)
{
var patrn=/^[a-zA-Z]{1,30}$/;
if (!patrn.exec(s)) return false
return true
}

//校验密码：只能输入6-20个字母、数字、下划线


function isPasswd(s)
{
var patrn=/^(\w){6,20}$/;
if (!patrn.exec(s)) return false
return true
}

//校验普通电话、传真号码：可以“+”开头，除数字外，可含有“-”


function isTel(s)
{
//var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?(\d){1,12})+$/;
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验手机号码：必须以数字开头，除数字外，可含有“-”


function isMobil(s)
{
var patrn=/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/;
if (!patrn.exec(s)) return false
return true
}

//校验邮政编码


function isPostalCode(s)
{
//var patrn=/^[a-zA-Z0-9]{3,12}$/;
var patrn=/^[a-zA-Z0-9 ]{3,12}$/;
if (!patrn.exec(s)) return false
return true
}

//校验搜索关键字


function isSearch(s)
{
var patrn=/^[^`~!@#$%^&*()+=|\\\][\]\{\}:;\'\,.<>/?]{1}[^`~!@$%^&()+=|\\\][\]\{\}:;\'\,.<>?]{0,19}$/;
if (!patrn.exec(s)) return false
return true
}
function isIP(s) //by zergling
{
var patrn=/^[0-9.]{1,20}$/;
if (!patrn.exec(s)) return false
return true
}
 
/*********************************************************************************
* FUNCTION: isBetween
* PARAMETERS: val AS any value
* lo AS Lower limit to check
* hi AS Higher limit to check
* CALLS: NOTHING
* RETURNS: TRUE if val is between lo and hi both inclusive, otherwise false.
**********************************************************************************/
function isBetween (val, lo, hi) {
if ((val < lo) || (val > hi)) { return(false); }
else { return(true); }
}
/*********************************************************************************
* FUNCTION: isDate checks a valid date
* PARAMETERS: theStr AS String
* CALLS: isBetween, isInt
* RETURNS: TRUE if theStr is a valid date otherwise false.
**********************************************************************************/
function isDate (theStr) {
var the1st = theStr.indexOf('-');
var the2nd = theStr.lastIndexOf('-');
if (the1st == the2nd) { return(false); }
else {
var y = theStr.substring(0,the1st);
var m = theStr.substring(the1st+1,the2nd);
var d = theStr.substring(the2nd+1,theStr.length);
var maxDays = 31;
if (isInt(m)==false || isInt(d)==false || isInt(y)==false) {
return(false); }
else if (y.length < 4) { return(false); }
else if (!isBetween (m, 1, 12)) { return(false); }
else if (m==4 || m==6 || m==9 || m==11) maxDays = 30;
else if (m==2) {
if (y % 4 > 0) maxDays = 28;
else if (y % 100 == 0 && y % 400 > 0) maxDays = 28;
else maxDays = 29;
}
if (isBetween(d, 1, maxDays) == false) { return(false); }
else { return(true); }
}
}
/*********************************************************************************
* FUNCTION: isEuDate checks a valid date in British format
* PARAMETERS: theStr AS String
* CALLS: isBetween, isInt
* RETURNS: TRUE if theStr is a valid date otherwise false.
**********************************************************************************/
function isEuDate (theStr) {
if (isBetween(theStr.length, 8, 10) == false) { return(false); }
else {
var the1st = theStr.indexOf('/');
var the2nd = theStr.lastIndexOf('/');
if (the1st == the2nd) { return(false); }
else {
var m = theStr.substring(the1st+1,the2nd);
var d = theStr.substring(0,the1st);
var y = theStr.substring(the2nd+1,theStr.length);
var maxDays = 31;
if (isInt(m)==false || isInt(d)==false || isInt(y)==false) {
return(false); }
else if (y.length < 4) { return(false); }
else if (isBetween (m, 1, 12) == false) { return(false); }
else if (m==4 || m==6 || m==9 || m==11) maxDays = 30;
else if (m==2) {
if (y % 4 > 0) maxDays = 28;
else if (y % 100 == 0 && y % 400 > 0) maxDays = 28;
else maxDays = 29;
}
if (isBetween(d, 1, maxDays) == false) { return(false); }
else { return(true); }
}
}
}
/********************************************************************************
* FUNCTION: Compare Date! Which is the latest!
* PARAMETERS: lessDate,moreDate AS String
* CALLS: isDate,isBetween
* RETURNS: TRUE if lessDate<moreDate
*********************************************************************************/
function isComdate (lessDate , moreDate)
{
if (!isDate(lessDate)) { return(false);}
if (!isDate(moreDate)) { return(false);}
var less1st = lessDate.indexOf('-');
var less2nd = lessDate.lastIndexOf('-');
var more1st = moreDate.indexOf('-');
var more2nd = moreDate.lastIndexOf('-');
var lessy = lessDate.substring(0,less1st);
var lessm = lessDate.substring(less1st+1,less2nd);
var lessd = lessDate.substring(less2nd+1,lessDate.length);
var morey = moreDate.substring(0,more1st);
var morem = moreDate.substring(more1st+1,more2nd);
var mored = moreDate.substring(more2nd+1,moreDate.length);
var Date1 = new Date(lessy,lessm,lessd); 
var Date2 = new Date(morey,morem,mored); 
if (Date1>Date2) { return(false);}
return(true);
}
/*********************************************************************************
* FUNCTION isEmpty checks if the parameter is empty or null
* PARAMETER str AS String
**********************************************************************************/
function isEmpty (str) {
if ((str==null)||(str.length==0)) return true;
else return(false);
}
/*********************************************************************************
* FUNCTION: isInt
* PARAMETER: theStr AS String 
* RETURNS: TRUE if the passed parameter is an integer, otherwise FALSE
* CALLS: isDigit
**********************************************************************************/
function isInt (theStr) {
var flag = true;
if (isEmpty(theStr)) { flag=false; }
else
{ for (var i=0; i<theStr.length; i++) {
if (isDigit(theStr.substring(i,i+1)) == false) {
flag = false; break;
}
}
}
return(flag);
}
/*********************************************************************************
* FUNCTION: isReal
* PARAMETER: heStr AS String 
decLen AS Integer (how many digits after period)
* RETURNS: TRUE if theStr is a float, otherwise FALSE
* CALLS: isInt
**********************************************************************************/
function isReal (theStr, decLen) {
var dot1st = theStr.indexOf('.');
var dot2nd = theStr.lastIndexOf('.');
var OK = true;
if (isEmpty(theStr)) return false;
if (dot1st == -1) {
if (!isInt(theStr)) return(false);
else return(true);
}
else if (dot1st != dot2nd) return (false);
else if (dot1st==0) return (false);
else {
var intPart = theStr.substring(0, dot1st);
var decPart = theStr.substring(dot2nd+1);
if (decPart.length > decLen) return(false);
else if (!isInt(intPart) || !isInt(decPart)) return (false);
else if (isEmpty(decPart)) return (false);
else return(true);
}
}
/*********************************************************************************
* FUNCTION: isEmail
* PARAMETER: String (Email Address)
* RETURNS: TRUE if the String is a valid Email address
* FALSE if the passed string is not a valid Email Address
* EMAIL FORMAT: AnyName@EmailServer e.g; webmaster@hotmail.com
* @ sign can appear only once in the email address.
*********************************************************************************/
function isEmail (theStr) {
var atIndex = theStr.indexOf('@');
var dotIndex = theStr.indexOf('.', atIndex);
var flag = true;
theSub = theStr.substring(0, dotIndex+1)
if ((atIndex < 1)||(atIndex != theStr.lastIndexOf('@'))||(dotIndex < atIndex + 2)||(theStr.length <= theSub.length)) 
{ return(false); }
else { return(true); }
}
/*********************************************************************************
* FUNCTION: newWindow
* PARAMETERS: doc -> Document to open in the new window
hite -> Height of the new window
wide -> Width of the new window
bars -> 1-Scroll bars = YES 0-Scroll Bars = NO
resize -> 1-Resizable = YES 0-Resizable = NO
* CALLS: NONE
* RETURNS: New window instance
**********************************************************************************/
function newWindow (doc, hite, wide, bars, resize) {
var winNew="_blank";
var opt="toolbar=0,location=0,directories=0,status=0,menubar=0,";
opt+=("scrollbars="+bars+",");
opt+=("resizable="+resize+",");
opt+=("width="+wide+",");
opt+=("height="+hite);
winHandle=window.open(doc,winNew,opt);
return;
}
/*********************************************************************************
* FUNCTION: DecimalFormat
* PARAMETERS: paramValue -> Field value
* CALLS: NONE
* RETURNS: Formated string
**********************************************************************************/
function DecimalFormat (paramValue) {
var intPart = parseInt(paramValue);
var decPart =parseFloat(paramValue) - intPart;
str = "";
if ((decPart == 0) || (decPart == null)) str += (intPart + ".00");
else str += (intPart + decPart);
return (str);
}

"^\\d+$" //非负整数（正整数 + 0）

"^[0-9]*[1-9][0-9]*$" //正整数

"^((-\\d+)|(0+))$" //非正整数（负整数 + 0）

"^-[0-9]*[1-9][0-9]*$" //负整数

"^-?\\d+$" //整数

"^\\d+(\\.\\d+)?$" //非负浮点数（正浮点数 + 0）

"^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$" //正浮点数

"^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$" //非正浮点数（负浮点数 + 0）

"^(-(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*)))$" //负浮点数

"^(-?\\d+)(\\.\\d+)?$" //浮点数

"^[A-Za-z]+$" //由26个英文字母组成的字符串

"^[A-Z]+$" //由26个英文字母的大写组成的字符串

"^[a-z]+$" //由26个英文字母的小写组成的字符串

"^[A-Za-z0-9]+$" //由数字和26个英文字母组成的字符串

"^\\w+$" //由数字、26个英文字母或者下划线组成的字符串

"^[\\w-]+(\\.[\\w-]+)*@[\\w-]+(\\.[\\w-]+)+$" //email地址

"^[a-zA-z]+://(\\w+(-\\w+)*)(\\.(\\w+(-\\w+)*))*(\\?\\S*)?$" //url

以上就是给大家分享的正则表达式基本语法，希望对大家学习有所帮助。

实用工具推荐

电子包浆

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

使用 ›
图片压缩

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

使用 ›
作者最新文章

JavaScript闭包与类(Class)的区别及适用场景对比

JavaScript入门要学ES6吗？let与箭头函数等新特性解析

JavaScript 8种数据类型详解：基本类型与引用类型的区别

怎么在JavaScript中使用async/await优化Ajax异步流程

JavaScript replace回调函数实现动态正则替换逻辑

相关文章
热门文章
更多
CSS text-transform与JS修改首字母大写的适用场景区别
JS中constructor属性判断数组存在哪些风险
JS正则替换中$1捕获组引用与字符串重组技巧
全栈开发中JavaScript与Java怎么协作？前后端技术栈配合解析
Node.js后端生成高强度随机字符串的方法
怎么在本地运行JavaScript脚本：Node.js下载安装与环境配置教程
JS正则表达式基础：字面量与RegExp构造函数的区别及常用元字符
JS 解压出现乱码或报错怎么解决？
JavaScript常见SyntaxError语法错误排查与修复方法
JS动态构建复杂嵌套JSON对象的方法