溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

正則表達式基本語法及表單驗證操作詳解【基于JS】

發(fā)布時間:2020-08-20 13:26:15 來源:腳本之家 閱讀:165 作者:艾米兔 欄目:web開發(fā)

本文實例講述了正則表達式基本語法及表單驗證操作。分享給大家供大家參考,具體如下:

正則表達式是一種可以用于模式匹配和替換的強有力的工具,是數(shù)據(jù)的有效性驗證。

一、基本語法

位于“/”定界符之間的部分就是將要在目標對象中進行匹配的模式。用戶只要把希望查找匹配對象的模式內(nèi)容放入“/”定界符之間即可。為了能夠使用戶更加靈活的定制模式內(nèi)容,正則表達式提供了專門的“元字符”。所謂元字符就是指那些在正則表達式中具有特殊意義的專用字符,可以用來規(guī)定其前導字符(即位于元字符前面的字符)在目標對象中的出現(xiàn)模式。

1. 較為常用的元字符包括: “+”, “*”,以及 “?”。

“+”元字符規(guī)定其前導字符必須在目標對象中連續(xù)出現(xiàn)一次或多次。
“*”元字符規(guī)定其前導字符必須在目標對象中出現(xiàn)零次或連續(xù)多次。
“?”元字符規(guī)定其前導對象必須在目標對象中連續(xù)出現(xiàn)零次或一次。

例:

/fo+/因為正則表達式中包含“+”元字符,表示可以與目標對象中的 “fool”,“fo”,或“football”等在字母f后面連續(xù)出現(xiàn)一個或多個字母o的字符串相匹配。
/eg*/因為正則表達式中包含“*”元字符,表示可以與目標對象中的 “easy”,“ego”,或“egg”等在字母e后面連續(xù)出現(xiàn)零個或多個字母g的字符串相匹配。
/Wil?/因為上述正則表達式中包含“?”元字符,表示可以與目標對象中的 “Win”,或“Wilson”,等在字母i后面連續(xù)出現(xiàn)零個或一個字母l的字符串相匹配。

2. 有時候不知道要匹配多少字符。為了能適應這種不確定性,正則表達式支持限定符的概念。這些限定符可以指定正則表達式的一個給定組件 必須要出現(xiàn)多少次才能滿足匹配。

{n} n是一個非負整數(shù)。匹配確定的n次。例'o{2}'不能匹配”Bob”中的 ‘o',但是能匹配”food”中的兩個o。
{n,} n是一個非負整數(shù)。至少匹配n次。例'o{2,}'不能匹配”Bob”中的 ‘o',但能匹配”fooood”中的所有o。'o{1,}'等價于'o+'。'o{0,}'則等價于'o*'。
{n,m} m和n均為非負整數(shù),其中n<=m。最少匹配n次且最多匹配m次。例”o{1,3}”將匹配”foooood”中的前三個o。'o{0,1}'等價于'o?'

請注意在逗號和兩個數(shù)之間不能有空格。

正則表達式基本語法及表單驗證操作詳解【基于JS】

3.幾個重要的元字符的使用方式:

正則表達式基本語法及表單驗證操作詳解【基于JS】

\s:用于匹配單個空格符,包括tab鍵和換行符;
\S:用于匹配除單個空格符之外的所有字符;
\d:用于匹配從0到9的數(shù)字;
\w:用于匹配字母,數(shù)字或下劃線字符;
\W:用于匹配所有與\w不匹配的字符;
. :用于匹配除換行符之外的所有字符。

(說明:我們可以把\s和\S以及\w和\W看作互為逆運算)

/\s+/ 上述正則表達式可以用于匹配目標對象中的一個或多個空格字符。
/\d000/ 如果我們手中有一份復雜的財務報表,那么我們可以通過上述正則表達式輕而易舉的查找到所有總額達千元的款項。

4.除了我們以上所介紹的元字符之外,正則表達式中還具有另外一種較為獨特的專用字符,即定位符。定位符用于規(guī)定匹配模式在目標對象中的出現(xiàn)位置。 較為常用的定位符包括: “^”, “$”, “\b” 以及 “\B”。

“^”定位符規(guī)定匹配模式必須出現(xiàn)在目標字符串的開頭
“$”位符規(guī)定匹配模式必須出現(xiàn)在目標對象的結(jié)尾
“\b”定位符規(guī)定匹配模式必須出現(xiàn)在目標字符串的開頭或結(jié)尾的兩個邊界之一
“\B”定位符則規(guī)定匹配對象必須位于目標字符串的開頭和結(jié)尾兩個邊界之內(nèi),即匹配對象既不能作為目標字符串的開頭,也不能作為結(jié)尾。
同樣,我們也可以把“^”和“$”以及“\b”和“\B”看作是互為逆運算的兩組定位符。
舉例來說: /^hell/ 因為上述正則表達式中包含“^”定位符,所以可以與目標對象中以 “hell”, “hello”或“hellhound”開頭的字符串相
匹配。 /ar$/ 因為上述正則表達式中包含“$”定位符,所以可以與目標對象中以 “car”, “bar”或 “ar” 結(jié)尾的字符串相匹配。
/\bbom/ 因為上述正則表達式模式以“\b”定位符開頭,所以可以與目標對象中以 “bomb”, 或 “bom”開頭的字符串相匹配。
/man\b/因為上述正則表達式模式以“\b”定位符結(jié)尾,所以可以與目標對象中以 “human”, “woman”或 “man”結(jié)尾的字符串相匹配。

說明:

為了能夠方便用戶更加靈活的設定匹配模式,正則表達式允許使用者在匹配模式中指定某一個范圍而不局限于具體的字符。例如:
/[A-Z]/上述正則表達式將會與從A到Z范圍內(nèi)任何一個大寫字母相匹配。
/[a-z]/上述正則表達式將會與從a到z范圍內(nèi)任何一個小寫字母相匹配。
/[0-9]/  上述正則表達式將會與從0到9范圍內(nèi)任何一個數(shù)字相匹配。
/([a-z][A-Z][0-9])+/ 上述正則表達式將會與任何由字母和數(shù)字組成的字符串,如 “aB0” 等相匹配。

這里需要提醒用戶注意的一點就是可以在正則表達式中使用 “()” 把字符串組合在一起?!?)”符號包含的內(nèi)容必須同時出現(xiàn)在目標對象中。

如果我們希望在正則表達式中實現(xiàn)類似編程邏輯中的“或”運算,在多個不同的模式中任選一個進行匹配的話,可以使用管道符 “|”。

正則表達式中還有一個較為常用的運算符,即否定符 “[^]”。與我們前文所介紹的定位符 “^” 不同,否定符 “[^]”規(guī)定目標對象中不能存在模式中所規(guī)定的字符串。

例如:/[^A-C]/上述字符串將會與目標對象中除A,B,和C之外的任何字符相匹配。一般來說,當“^”出現(xiàn)在 “[]”內(nèi)時就被視做否定運算符;

而當“^”位于“[]”之外,或沒有“[]”時,則應當被視做定位符。

最后,當用戶需要在正則表達式的模式中加入元字符,并查找其匹配對象時,可以使用轉(zhuǎn)義符“\”。例如:/Th\*/上述正則表達式將會與目標對象中的“Th*”而非“The”等相匹配。

二、使用實例

在JavaScript 1.2中帶有一個功能強大的RegExp()對象,可以用來進行正則表達式的匹配操作。其中的test()方法可以檢驗目標對象中是否

包含匹配模式,并相應的返回true或false。

語法: re = new RegExp("pattern",["flags"])

re——必選項。將要賦值為正則表達式模式的變量名。
pattern——必選項。要使用的正則表達式模式。
flags——可選項。要用引號將 flag 引起來。標志可以組合使用,可用的有:g (全文查找出現(xiàn)的所有 pattern)   i (忽略大小寫)   m (多行查找)

正則表達式基本語法及表單驗證操作詳解【基于JS】

常用正則:

驗證數(shù)字:^[0-9]*$
驗證n位的數(shù)字:^\d{n}$
驗證至少n位數(shù)字:^\d{n,}$
驗證m-n位的數(shù)字:^\d{m,n}$
驗證零和非零開頭的數(shù)字:^(0|[1-9][0-9]*)$
驗證有兩位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{2})?$
驗證有1-3位小數(shù)的正實數(shù):^[0-9]+(.[0-9]{1,3})?$
驗證非零的正整數(shù):^\+?[1-9][0-9]*$
驗證非零的負整數(shù):^\-[1-9][0-9]*$
驗證非負整數(shù)(正整數(shù) + 0) ^\d+$
驗證非正整數(shù)(負整數(shù) + 0) ^((-\d+)|(0+))$
驗證長度為3的字符:^.{3}$
驗證由26個英文字母組成的字符串:^[A-Za-z]+$
驗證由26個大寫英文字母組成的字符串:^[A-Z]+$
驗證由26個小寫英文字母組成的字符串:^[a-z]+$
驗證由數(shù)字和26個英文字母組成的字符串:^[A-Za-z0-9]+$
驗證由數(shù)字、26個英文字母或者下劃線組成的字符串:^\w+$
驗證用戶密碼:^[a-zA-Z]\w{5,17}$ 正確格式為:以字母開頭,長度在6-18之間,只能包含字符、數(shù)字和下劃線。
驗證是否含有 ^%&',;=?$\"  等字符:[^%&',;=?$\x22]+
驗證漢字:^[\u4e00-\u9fa5],{0,}$
驗證Email地址:^\w+[-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
驗證InternetURL:^http://([\w-]+\.)+[\w-]+(/[\w-./?%&=]*)?$ ;^[a-zA-z]+://(w+(-w+)*)(.(w+(-w+)*))*(?S*)?$
驗證電話號碼:^(\(\d{3,4}\)|\d{3,4}-)?\d{7,8}$:--正確格式為:XXXX-XXXXXXX,XXXX-XXXXXXXX,XXX-XXXXXXX,XXX-XXXXXXXX,XXXXXXX,XXXXXXXX。
驗證身份證號(15位或18位數(shù)字):^\d{15}|\d{}18$
驗證一年的12個月:^(0?[1-9]|1[0-2])$ 正確格式為:“01”-“09”和“1”“12”
驗證一個月的31天:^((0?[1-9])|((1|2)[0-9])|30|31)$ 正確格式為:01、09和1、31。
整數(shù):^-?\d+$
非負浮點數(shù)(正浮點數(shù) + 0):^\d+(\.\d+)?$
正浮點數(shù) ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$
非正浮點數(shù)(負浮點數(shù) + 0) ^((-\d+(\.\d+)?)|(0+(\.0+)?))$
負浮點數(shù) ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$
浮點數(shù) ^(-?\d+)(\.\d+)?
非單字節(jié) [^\x00-xff]

1.返回一個含有漢子的字符串長度

function getlength(str){
 return str.replace(/[^\x00-xff]/g,"xx").length;
}

2.用戶名6-25個字符,不能有非法字符

oName.onblur=function(){
    var re=/[^\w\u4e00-\u9fa5]/g;
    if (re.test(this.value)){
      name_msg.innerHTML='含有非法字符!';
    }
    else if(this.value){
      name_msg.innerHTML='用戶名不能為空!';
    }
    else if(name_length>25){
      name_msg.innerHTML='長度超過25個字符!';
    }
    else if(name_length<6){
      name_msg.innerHTML='長度少于6個字符!';
    }
    else{  OK; }
}

3.用戶設置密碼,不能為空、相同字符、全為數(shù)字、全為字母

pwd.onblur=function(){
    if(this.value==""){pwd_msg.innerHTML='不能為空!'}
}

PS:這里再為大家提供2款非常方便的正則表達式工具供大家參考使用:

JavaScript正則表達式在線測試工具:
http://tools.jb51.net/regex/javascript

正則表達式在線生成工具:
http://tools.jb51.net/regex/create_reg

更多關于JavaScript相關內(nèi)容感興趣的讀者可查看本站專題:《JavaScript正則表達式技巧大全》、《JavaScript替換操作技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript中json操作技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》及《JavaScript數(shù)學運算用法總結(jié)》

希望本文所述對大家JavaScript程序設計有所幫助。

向AI問一下細節(jié)

免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。

AI