JavaScript表单验证：正则表达式元字符与限定符详解

推荐阅读：JavaScript表单验证的长度

JavaScript表单验证-提交表单

JavaScript表单验证-初识正则表达式

承接上篇介绍的JavaScript表单验证-初识正则表达式，本文深入讲解JavaScript表单验证-揭开正则表达式的面纱，详情见全文。

正则表达式元字符匹配规则

利用元字符匹配特定字符类型

构建正则表达式类似于创建字符串字面量，但正则表达式被包裹在一对斜杠“/”之间

正则表达式中使用一级元字符来连接字母与数字

“.” 用于匹配任何字符，但不包括换行符

“\d”用于匹配任何数字字符

“\w”用于匹配任何字母或数字字符

“\s”用于匹配空格

“^”表示字符串必须以该模式作为起始

“$”表示字符串必须以该模式作为结束

元字符不仅仅表示字面量字符，更是构建正则表达式的符号

示例：这里包含三个字符

“A”,”7”,”%”

/\w/可以匹配“A”或“7”

/^\d/可以匹配“7”

/\d/可以匹配“7”

/./可以匹配“A”、“7”或“%”

那么，如何处理包含多个字符的字符串呢？

“2nite”,”007”,”catch22”,

/^\d/可匹配到“2nite”和“007”(因为开头都是数字)

/\d\d\d/可匹配“007”(表示一行中有3个连续数字)

/^cat/可匹配“catch22”(表示以cat字符开头)

/\d\d$/可匹配“catch22”(表示必须以两个数字结尾)

例如：匹配美国邮编，其格式为#####-####

/^\d\d\d\d\d-\d\d\d\d$/

使用限定符控制子模式次数

使用限定符指定字符出现的次数

限定符用于控制子模式在正则表达式中出现的次数

限定符前为子模式，限定符即作用于该子模式，并控制其出现的次数

“*”表示限定符前的子模式必须出现0次或多次

“+”表示限定符前的子模式必须出现1次或多次

“?”表示限定符前的子模式必须出现0次或1次

“{n}”表示限定符前的子模式必须恰好出现N次

“()”用于集合字符或/和元字符，形成子模式

同样以邮政编码为例

/^\d{5}-\d{4}$/

可以看出，加上限定符的表达式比仅使用元字符的表达式更加精准

/\w*/匹配任何字母数字字符，包括空字符串

/.+/匹配一个出现一次以上的字符串(用于匹配非空字符串)

/(Hot)??Donuts/可匹配出Hot或Donuts

在正则表达式中，若想要匹配具有特殊意义的字符，可以使用反斜杠

例如匹配$:\$*

利用RegExp对象进行数据验证

利用正则表达式验证数据

JavaScript中的正则表达式由RegExp对象表示，其中包含使用正则表达式验证数据的关键–test()方法，它检查字符串中是否存在指定的模式

示例：

var regex=/^\d{5}$/;//匹配5位数邮政编码的正则表达式;

正则表达式对象字面量自动构建RegExp对象

if(!regex.test(inputFiled.value)) 
{ 
//在正则表达式上调用text方法 
//如果符合合正则表达式的要求,返回true 
//如果不符合正则表达式的要求,返回false 
}

代码案例

接下来，编写一个专门用来验证字符串格式的方法

//regex正则表达式
//inputStr需要验证的字符串
//helpText提供信息提示的一个span标签
//helpMessage提示信息内容
//
function validateRegExp(regex,inputStr,helpText,helpMessage)
{
if(!regex.test(inputStr))
{
if(helpText!=null)
helpText.innerHTML=helpMessage;
return false;
}
else{
if(helpText!=null)
helpText.innerHTML="";
}
return true;
}
function validateDate(inputFild,helpText)
{
if(!validateNonEmpty(inputFild,helpText)//先检查参数是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"请输入正确的日期格式");//调用正则验证方法
}

好了，本文到此结束，感谢大家对本站网站的支持！