Javascript的表單驗證-揭開正規表示式的面紗_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”(開頭都是數字)

/ddd/可匹配”007”(一行中有3個數字)

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

/dd$/可匹配”catch22”(必須以兩個數字來結尾)

例如:符合美國郵編,郵編格式為#####-####

/^ddddd-dddd$/

用限定符指定字元出現的次數

限定符用於控制項子模式出現於正規表示式裡的次數

限定符前為子模式，限定符即應用在子模式，並控制子模式出現在模式裡的次數

「*」限定符前的子模式必須出現0次或多次

「+」限定符前的子模式必須出現1次或多次

「?」限定符前的子模式必須出現0次或1次

「{n}」限定符前的子模式必須剛好出現N次

「()」集合字元或/和元字元,成為子模式

也是以郵遞區號為例

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

可以看出,加上限定符的表達式比只有元字符的表達式更加的精準

/w*/符合任何字母數字字元,包含空字串

/.+/符合一個出現一次以上的字串(用來符合非非空的字串)

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

*在正規表示式裡想要匹配具有特殊意義的字元的時候,可以用反斜線

例如匹配$:$*

利用正規表示式驗證資料

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,"请输入正确的日期格式");//调用正则验证方法
}

好了，本文到此結束，感謝大家對腳本之家網站支持！