推薦閱讀：Javascript的表單驗(yàn)證長(zhǎng)度

Javascript的表單驗(yàn)證-提交表單

Javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式

在上篇文章給大家介紹了javascript的表單驗(yàn)證-初識(shí)正則表達(dá)式，本文給大家介紹Javascript的表單驗(yàn)證-揭開正則表達(dá)式的面紗，具體詳情請(qǐng)看全文。

用元字符匹配相應(yīng)的字符類型

創(chuàng)建正則表達(dá)式有點(diǎn)像創(chuàng)建字符串字面量，只不過正則表達(dá)式出現(xiàn)在一對(duì)”/”里

正則表達(dá)式中會(huì)用到一級(jí)元字符，用于連接字母與數(shù)字

“.” 匹配任何字符,除換行符外

“\d”匹配任何數(shù)字字符

“\w”匹配任何字母或數(shù)字字符

“\s”匹配空格

“^”字符串需以模式起始

“$”字符串需以模式結(jié)束

元字符不只表示一個(gè)字面量字符,它乃是用于構(gòu)建正則表達(dá)式的符號(hào)

例:這里有三個(gè)字符

“A”,”7”,”%”

/\w/可以匹配”A”,”7”

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

/\d/可以匹配”7”

/./可以匹配”A”,”7”,”%”

但是包含多個(gè)字符的字符串怎么辦?

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

/^\d/可匹配到”2nite”,”007”(開頭都是數(shù)字)

/\d\d\d/可匹配”007”(一行中有3個(gè)數(shù)字)

/^cat/可匹配”catch22”(以cat字符開頭)

/\d\d$/可匹配”catch22”(必須以兩個(gè)數(shù)字來結(jié)尾)

例如:匹配美國(guó)郵編,郵編格式為#####-####

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

用限定符指定字符出現(xiàn)的次數(shù)

限定符用于控件子模式出現(xiàn)于正則表達(dá)式里的次數(shù)

限定符前為子模式，限定符即應(yīng)用在子模式，并控制子模式出現(xiàn)在模式里的次數(shù)

“*”限定符前的子模式必須出現(xiàn)0次或多次

“+”限定符前的子模式必須出現(xiàn)1次或多次

“?”限定符前的子模式必須出現(xiàn)0次或1次

“{n}”限定符前的子模式必須恰好出現(xiàn)N次

“()”集合字符或/和元字符,成為子模式

同樣是以郵政編碼為例

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

可以看出,加上限定符的表達(dá)式比只有元字符的表達(dá)式更加的精準(zhǔn)

/\w*/匹配任何字母數(shù)字字符,包括空字符串

/.+/匹配一個(gè)出現(xiàn)一次以上的字符串(用于匹配非非空的字符串)

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

*在正則表達(dá)式里想要匹配具有特殊意義的字符的時(shí)候,可以用反斜杠

例如匹配$:\$*

利用正則表達(dá)式驗(yàn)證數(shù)據(jù)

JavaScript里的正則表達(dá)式由RegExp對(duì)象表示,其中包含使用正則表達(dá)式驗(yàn)證數(shù)據(jù)的關(guān)鍵–test()方法,它檢查字符串里是否存在指定的模式

例:

正則表達(dá)式對(duì)象字面量自動(dòng)合建RegExp對(duì)象

if(!regex.test(inputFiled.value)) 
{ 
//在正則表達(dá)式上調(diào)用text方法 
//如果符合合正則表達(dá)式的要求,返回true 
//如果不符合正則表達(dá)式的要求,返回false 
}

代碼案例

接下來,寫一個(gè)專門用來驗(yàn)證字符串格式的方法

//regex正則表達(dá)式
//inputStr需要驗(yàn)證的字符串
//helpText提供信息提示的一個(gè)span標(biāo)簽
//helpMessage提示信息內(nèi)容
//
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)//先檢查參數(shù)是非空的
{
return false;
}
return validateRegExp(/^\d{2}\/\d{2}\/\d{4}$/,inputFild,helpText,"請(qǐng)輸入正確的日期格式");//調(diào)用正則驗(yàn)證方法
}

好了，本文到此結(jié)束，感謝大家對(duì)腳本之家網(wǎng)站支持！