正則表達式以及正則在JS表單校驗中的應用
1. 正則表達式的引入
表單驗證兩種常用的方法:
<input type="submit" onclick="return validate()"/>
<form action="/aa" onsubmit="return validate()"/>這裡我們使用QQ號碼作為表單驗證來測試，我們知道QQ號碼的規則還是比較複雜，但是這裡我們僅僅使用以下三條規則來講解:
1. qq號必須是5-10位
2. 數字0不可以作為qq號碼的開頭
3. QQ號碼必須是純數字組成
代碼示例如下所示:
<input type="submit" onclick="return validate()"/>
<form action="/aa" onsubmit="return validate()"/>當然除了在form表單中添加onsubmit事件來實現表單驗證，我們還可以使用在submit類型的input標籤中添加onclick事件來實現表單驗證，代碼如下所示:
<form action="server/server.html" method="get" >
QQ賬號: <input id="qq" type="text" placeholder="請輸入QQ賬號...">
<span id="msg"></span> <br>
<input type="submit" value="登錄" onclick="return checkQQ();">
</form>相信大家對上述代碼都能夠理解，但是大家應該也發現了使用傳統的if-else來校驗qq號碼，代碼非常冗餘，而且可讀性很差，何況才短短兩條規則就寫了這麼多的判斷，那真實的qq號碼肯定規則更多，如果讓你去驗證郵箱，或者網址呢？所以我們非常有必要學習一門新的技術用於我們JS表單校驗，它就是正則表達式了。
2. 正則表達式概述
正則表達式簡介
為什麼需要正則表達式？
1.本質是用來對複雜文本進行處理。
2.當然也可以用於數據校驗
3.文本匹配、搜索、分割、替換等等
正則表達式的優勢和用途？
一種強大而靈活的文本處理工具；
提供了一種緊湊的、動態的方式，能夠以一種完全通用的方式來解決各種字元串處理（例如：驗證、查找、替換等）問題；
大部分語言、資料庫都支持正則表達式。
正則表達式定義：
正如他的名字一樣是描述了一個規則，通過這個規則可以匹配一類字元串。
正則表達式的用處：
驗證給定字元串是否符合指定特徵，比如驗證是否是合法的郵件地址。
用來查找字元串，從一個長的文本中查找符合指定特徵的字元串。
用來替換，比普通的替換更強大，用來替換滿足某個規則的字元串
用來分割，比普通的分割更強大，用來分割滿足某個規則的字元串
3. 工具軟體的使用
3.1. 工具軟體RegexBuddy的使用
為了提高開發效率，一般都先在工具軟體中測試正則表達式，通過測試後，才在程序中使用。
3.2 正則表達式圖形化顯示網站 Regexper
由於正則表達式非常靈活，正則表達式本身的可讀性非常差，所以比較複雜的正則表達式閱讀起來相對比較困難，所以我們可以藉助一個圖形化正則表達式網站來幫助我們分析一個相對複雜的正則表達式。
正則圖形化顯示網站:
//regexper.com
//regexr-cn.com
圖形化顯示結果如下所示:
4. 正則表達式規則
4.1 普通字元
字母、數字、漢字、下劃線、以及沒有特殊定義的標點符號，都是「普通字元」。表達式中的普通字元，在匹配一個字元串的時候，匹配與之相同的一個字元。例如字元a, b, c ,1，2，中等等。
4.2 轉義字元
| n | 代表換行符 |
| t | 製表符 |
| 代表本身 | |
| ^ ，$,.，(， ) ， {， } ， ? ， + ， * ， | ，[， ] | 匹配這些字元本身 |
4.3 字符集合
[ ]方括弧匹配方式，能夠匹配方括弧中任意一個字元
| [ab5@] | 匹配 “a” 或 “b” 或 “5” 或 “@” |
| [^abc] | 匹配 “a”,”b”,”c” 之外的任意一個字元 |
| [f-k] | 匹配 “f”~”k” 之間的任意一個字母 |
| [^A-F0-3] | 匹配 “A”~”F”,”0″~”3″ 之外的任意一個字元 |
顯示效果如下所示:
注意: 正則表達式中的特殊符號，如果被包含於中括弧中，則失去特殊意義，但 [ ] : ^ – 除外。
4.4 預定義字元
還有一些字元是正則表達式語法事先定義好的，有特殊的含義，能夠與 『多種字元』 匹配的表達式
| d | 任意一個數字，0~9 中的任意一個 |
| w | 任意一個字母或數字或下劃線，也就是 A~Z,a~z,0~9,_ 中任意一個 |
| s | 包括空格、製表符、換行符等空白字元的其中任意一個 |
| . | 小數點可以匹配除了換行符（n）以外的任意一個字元 |
注意: 如果是D,W,S表示相反的意思。
4.5 量詞
| {n} | 表達式重複n次 |
| {m,n} | 表達式至少重複m次，最多重複n次 |
| {m,} | 表達式至少重複m次 |
| ? | 匹配表達式0次或者1次，相當於 {0,1} |
| + | 表達式至少出現1次，相當於 {1,} |
| * | 表達式不出現或出現任意次，相當於 {0,} |
顯示效果如下所示:
表達式至少重複2次，最多重複4次
至少3次:
匹配表達式0次或者1次，相當於 {0,1}.
+至少一次
表達式不出現或出現任意次，相當於 {0,}
4.6 貪婪模式和非貪婪模式
匹配次數中的貪婪模式(匹配字元越多越好)
「{m,n}」, 「{m,}」, 「?」, 「*」, 「+」，具體匹配的次數隨被匹配的字元串而定。這種重複匹配不定次數的表達式在匹配過程中，總是儘可能多的匹配。
匹配次數中的非貪婪模式（匹配字元越少越好）
在修飾匹配次數的特殊符號後再加上一個 “?” 號，則可以使匹配次數不定的表達式儘可能少的匹配，使可匹配可不匹配的表達式，儘可能地 “不匹配”。
4.7 邊界字元
(本組標記匹配的不是字元而是位置，符合某種條件的位置)
| ^ | 與字元串開始的地方匹配 |
| $ | 與字元串結束的地方匹配 |
| b | 匹配一個單詞邊界 |
顯示效果如下所示:
4.8 選擇符和分組
| 表達式 | 作用 |
| | | 左右兩邊表達式之間 “或” 關係，匹配左邊或者右邊 |
| ( ) | (1). 在被修飾匹配次數的時候，括弧中的表達式可以作為整體被修飾(2). 取匹配結果的時候，括弧中的表達式匹配到的內容可以被單獨得到(3). 每一對括弧會分配一個編號，使用 () 的捕獲根據左括弧的順序從 1 開始自動編號。捕獲元素編號為零的第一個捕獲是由整個正則表達式模式匹配的文本 |
選擇符操作顯示效果如下所示:
分組:
4.9 反向引用（nnn）
1. 每一對()會分配一個編號，使用 () 的捕獲根據左括弧的順序從 1 開始自動編號。
2. 通過反向引用，可以對分組已捕獲的字元串進行引用。
5. 正則表達式的匹配模式
5.1 IGNORECASE 忽略大小寫模式
1. 匹配時忽略大小寫。
2. 默認情況下，正則表達式是要區分大小寫的。
5.2 SINGLELINE 單行模式
1. 整個文本看作一個字元串，只有一個開頭，一個結尾。
2.使小數點 “.” 可以匹配包含換行符（n）在內的任意字元。
5.3 MULTILINE 多行模式
1.每行都是一個字元串，都有開頭和結尾。
2.在指定了 MULTILINE 之後，如果需要僅匹配字元串開始和結束位置，可以使用 A 和 Z
6.開發中使用正則表達式的流程
1. 分析所要匹配的數據，寫出測試用的典型數據
2. 在工具軟體中進行匹配測試
3. 在程序中調用通過測試的正則表達式
7. 課堂練習
電話號碼驗證
(1)電話號碼由數字和”-“構成
(2)電話號碼為7到8位(不加區號)
(3)如果電話號碼中包含有區號，那麼區號為三位或四位, 首位是0.
(4)區號用”-“和其他部分隔開
(5)行動電話號碼為11位
(6)11位行動電話號碼的第一位和第二位為”13「，」15」，」18」
0(d{2,3})-d{7,8}
(13)|(15)|(18)d{9}
8. Java中使用正則表達式
相關類位於：java.util.regex包下面
類 Pattern：
正則表達式的編譯表示形式。
Pattern p = Pattern.compile(r); //建立正則表達式，並啟用相應模式
類 Matcher：
通過解釋 Pattern 對 character sequence 執行匹配操作的引擎
Matcher m = p.matcher(str); //匹配str字元串
編程中使用正則表達式常見情況：
驗證表達式是否匹配整個字元串
驗證表達式是否可以匹配字元串的子字元串
返回給定字元串中匹配給定正則表達式所有子字元串
替換給定字元串中匹配正則表達式的子字元串
根據正則表達式定義規則截取字元串
9. JAVASCRIPT中使用正則表達式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- QQ賬號的驗證:
1.qq號必須是5-10位
2.數字0不可以作為qq號碼的開頭
--> <form action="server/server.html" method="get" onsubmit="return checkQQ()">
QQ賬號: <input id="qq" type="text" placeholder="請輸入QQ賬號..."> <span id="msg"></span> <br>
<input type="submit" value="登錄">
</form>
<script>
function checkQQ() { var qq = document.getElementById("qq").value;
var msg = document.getElementById("msg");
// 默認qq號碼是合格的
var flag = true;
// 保證5-10位
if(qq.length >= 5 && qq.length <= 10) {
// 保證不是0開頭
if(qq.charAt(0) != 0) {
// 保證是數字
for(var i = 0; i < qq.length; i++) {
var ch = qq.substr(i,1);
if(!(ch >= '0' && ch <= '9')) {
flag = false;
msg.innerText = "XXX QQ號碼必須是數字!!!"
msg.style.color = "red";
break;
}
}
} else {
flag = false;
msg.innerText = "XXX QQ號碼不能以數字0開頭!!!"
msg.style.color = "red";
}
} else {
flag = false;
msg.innerText = "XXX QQ號碼的位數必須在5~10之間!!!"
msg.style.color = "red";
}
return flag;
}
</script>
</body>
</html>Flags可選項常見值：
g （全文查找出現的所有pattern）（沒有g只會匹配一次)
i （忽略大小寫）
<form action="server/server.html" method="get" >
QQ賬號: <input id="qq" type="text" placeholder="請輸入QQ賬號...">
<span id="msg"></span> <br>
<input type="submit" value="登錄" onclick="return checkQQ();">
</form>RegExp對象常用方法：
exec(): 返回的是一個數組。該數組包含了匹配該模式的第一個子字元串以及該子字元串中匹配相關分組的字元串。比如：
var re = new RegExp("(d+)([a-z]+)","ig");
var result = re.exec("33ff55tt77uu88yy"); 返回的數組為：[33ff,33,ff]
test(): 返回一個 Boolean 值，它指出在被查找的字元串中是否存在模式匹配的子字元串
//test 查找是否 存在的字元串
var str1 = "abc123abc123";
//判斷字元串是否都是數字
var reg3 = /^d+$/;
var flag = reg3.test(str1);
console.log(flag);字元串中常用的使用正則表達式的方式：
match():使用正則表達式模式對字元串執行查找，並將符合該模式的所有子字元串包含到數組中返回。
var re = new RegExp("(d+)([a-z]+)","ig");
var reg = /(d+)([a-z]+)/gi;
var t = "33ff55tt77uu88yy".match(re);結果為數組：[33ff,55tt,77uu,88yy]
search(): 返回與正則表達式查找內容匹配的第一個子字元串的位置
var reg = /d+/g; // 數組正則
var index = "33ff55tt77uu88yy".search(reg);
split(regex)：按照指定的模式切割字元串，返回一個數組。
var t = "asdfd33ff55tt77uu88yy".split(/d+/);
replace()： 替換
var t = "asdfd3355tt77uu88yy".replace(/d+/g,"#");
代碼示例如下所示：
// 替換
// 指定為global模式，否則只替換第一個子字元串
var reg4= /d+/g;
var str2 = str1.replace(reg4,"#");
console.log(str2);10. 針對錶單域的驗證，封裝一個通用的函數
我們可以編寫一個簡單的用戶名驗證的方法，代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Js表單正則驗證</title>
</head>
<body>
<form action="server/server.html" method="get">
用戶名:<input type="text" id="nameId" name="name" onblur="checkName();"><span id="msg"></span><br>
密碼: <input type="password" name="pwd"><br>
<input type="submit">
</form>
<script>
/*
表單驗證:
實現思路:
1.給input標籤添加onblur事件
2.獲取input標籤輸入的內容
3.判斷是否輸入合法
4.dom操作修改頁面提示信息
*/
function checkName() {
var nameInputValue = document.getElementById("nameId").value;
var msg = document.getElementById("msg");
var reg = /^[u4e00-u9fa5]{2,10}$/;
if(reg.test(nameInputValue)) {
msg.innerText = "√ 用戶名合法!!!"
msg.style.color = "red";
} else {
msg.innerText = "X 用戶名必須是2-10個中文字元!!!"
msg.style.color = "red";
}
}
</script>
</body>
</html>這裡我們通過輸入框失去焦點來對輸入的內容進行驗證，驗證的步驟也非常簡單，步驟基本如下所示:
1. 給表單域添加onblur失去焦點事件
2. 獲取表單域輸入框的內容
3. 通過正則表達式判斷輸入是否合法
4. 根據是否合法顯示不同的頁面提示信息
通過觀察我們不難發現，不僅驗證用戶名，驗證郵箱，密碼，身份證等等基本上步驟都是一樣的，但是有一些例如正則表達式或者顯示的正確或者錯誤信息是變化的，所以我們可以對驗證的方法進行封裝，將變化的抽取成為形參，從而用於其他的表單校驗，代碼如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
表單驗證:
1. 如果三個驗證有一個失敗 不能提交數據
2. 驗證的時候需要有錯誤信息提示
思路:
1. 添加onsubmit 方法(在表單提交數據前執行的 事件)
2. 驗證的時候 用戶密碼郵箱等存在重複的代碼 可以進行封裝
-->
<form method="get" action="/demo01" onsubmit="return checkForm()">
用戶名:<input id="nameId" type="text" name="name"/><span id="msgName"></span><br>
密碼:<input id="pwdId" type="password" name="name"/><span id="msgPwd"></span><br>
郵箱:<input id="emailId" type="text" name="email"><span id="msgEmail"></span><br>
<input type="submit"/>
</form>
<script> function checkForm() {
// 驗證用戶名
// 2~10個漢字
var regex1 = /^[u4e00-u9fa5]{2,10}$/;
var nameFlag = checkInput("nameId","msgName",regex1,"√ 輸入合格","x 必須是2~10個漢字!!!");
// 驗證密碼
// 6個數字的密碼
var regex2 = /^d{6}$/;
var pwdFlag = checkInput("pwdId", "msgPwd", regex2, "√ 輸入合格", "x 必須是6個存數字組成!!!");
// 驗證郵箱
var regex3 = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
var emailFlag = checkInput("emailId", "msgEmail", regex3, "√ 輸入合格", "x 郵箱格式不正確!!!");
console.log(nameFlag);
console.log(pwdFlag);
console.log(emailFlag);
return nameFlag && pwdFlag && emailFlag;
}
function checkInput(objId, msgId, regex, successMsg, errMsg) {
var inputNodeValue = document.getElementById(objId).value;
var spanNode = document.getElementById(msgId);
if(regex.test(inputNodeValue)) {
spanNode.innerText = successMsg;
spanNode.style.color = "green";
return true;
} else {
spanNode.innerText = errMsg;
spanNode.style.color = "red";
return false;
}
}
</script>
</body>
</html>
原創文章，作者：投稿專員，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/209455.html
微信掃一掃 
支付寶掃一掃 