推薦閱讀: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
*在正則表達式裡想要匹配具有特殊意義的字符的時候,可以用反斜槓
例如匹配$:\$*
利用正則表達式驗證數據
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,"請輸入正確的日期格式");//調用正則驗證方法 }
好了,本文到此結束,感謝大家對網站支持!