瞭解瞭如何定義一個正規表示式，那麼在實際的工作應用中，經常使用正規表示式驗證哪些內容呢？針對新使用者註冊頁面，需要驗證的內容有使用者名稱、密碼、電子郵箱、手機號碼、身份證號碼、生日、郵政編碼、固定電話等，主要是檢查輸入的內容是否是中文字元、英文字母、數字、下劃線等，以及對輸入內容的長度驗證。例如，使用者名稱是否只有中文字元、英文字母、數字及下劃線，手機號碼是否由數字組成，身份證號碼的長度是否是 15位或18位，以及是否全由數字組成。

上面我們看到的是網頁中經常用到的驗證內容，那麼如何編寫正規表示式來實現呢？例如，郵政編碼、手機號碼的驗證，中國的郵政編碼都是六位，而手機號碼都是 11位，並且第一位都是1，因此對郵政編碼和手機號碼進行驗證的正規表示式如下。

var regCode=/^\d{6}$//;

var regMobile=/^l\d{10}$/;

驗證郵政編碼和手機號碼的程式碼如示例 9所示。

【示例】　驗證郵編和手機號碼

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>驗證郵編和手機號碼</title>
<style type="text/css">
body {line-height: 25px; }
input {width: 120px; height: 16px; }
div {color: #F00; font-size: 12px; display: inline-block;padding-left: 5px;}
ul, li {list-style: none; }
</style>
</head>
<body>
<ul>
<li>郵政編碼：<input id="code" type="text" />
<div id="divCode"></div>
</li>
<li>手機號碼：<input id="mobile" type="text" />
<div id="divMobile"></div>
</li>
</ul>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$("#code").blur(function() {
var code = $(this).val();
var $codeId = $("#divCode");
var regCode = /^\d{6}$/;
if(regCode.test(code) == false) {
$codeId.html("郵政編碼不正確，請重新輸入");
return false;
}
$codeId.html("");
return true;
});
$("#mobile").blur(function() {
var mobile = $(this).val();
var $mobileId = $("#divMobile");
var regMobile = /^1\d{10}$/;
if(regMobile.test(mobile) == false) {
$mobileId.html("手機號碼不正確，請重新輸入");
return false;
}
$mobileId.html("");
return true;
});
});
</script>
</body>
</html>

在瀏覽器中執行示例，如果在郵政編碼輸入框中輸入的不全是數字或長度不是六位，均提示錯誤；如果在手機號碼輸入框中輸入的不全是數字，或第一位不是 1，或長度不是11位，均提示錯誤。

以上使用正規表示式驗證了手機號碼和郵政編碼，但是這只是規定了字串的長度及字串中某一位上的數字的範圍，如果要對年齡進行驗證，則年齡必須為 0~120，該如何編寫正規表示式呢？

思路分析

(1) 10-99這個範圍都是兩位數，十位是1-9，個位是0-9，正規表示式為[1-9]\d。

(2) 0~9這個範圍是一位數，正規表示式為\d。

(3) 100~119這個範圍是三位數，百位是1，十位是0~1，個位是0~9，正規表示式為1[0-1]\d。

(4) 根據以上可知，所有年齡的個位都是0~9，當百位是1時，十位是0~1，當年齡為兩位數時十位是1~9，因此0~119這個範圍的正規表示式為(1[0-1]|[1-9])?\d。

(5) 年齡為120是單獨的一種情況，需要單獨列出來。

根據思路分析， ^和$限制了匹配單獨的一行，使用正規表示式驗證年齡的完整程式碼如示例10所示。

【示例】　驗證年齡
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>驗證年齡</title>
<style type="text/css">
span{color: #ff0000; padding-left: 5px; font-size: 12px;}
</style>
</head>
<body>
年齡： <input id="age" type="text"/><span id="divAge"></span>
<script src="js/jquery-1.12.4.js"></script>
<script>
$(document).ready(function(){
$("#age").blur(function(){
var age = $(this).val();
var $ageId = $("#divAge");
var regAge = /^120$|^((1[0-1]|[1-9])?\d)$/m;
if (regAge.test(age) == false) {
$ageId.html("年齡不正確，請重新輸入");
return false;
}
$ageId.html("");
return true;
});
});
</script>
</body>
</html>

上述校驗年齡的正規表示式，對於 "01"、“012”、“0012"這樣的數字，校驗結果是不合法的，這樣的結果對使用者來說似乎有些苛刻，畢竟在正常年齡前多個0，仍然是個正確的年齡數字，因此可以進一步修改前面的正規表示式，允許開頭有任意個0，可以表示為”[0]*"，完整驗證年齡的正規表示式則變成"^[0]*(120|((1[0-1]|[1-9])?\d))$ "。

從前面的示例可以看出，結果要匹配得越精確，則編寫的正規表示式就越複雜。編寫一個複雜的表示式，應該先分解問題，從簡單的表示式開始，然後組合成複雜的表示式。

到這裡為止，我們學習了什麼是正規表示式及如何定義一個正規表示式，並且使用正規表示式進行了簡單的驗證。下面我們綜合運用以上所學的知識，驗證一個使用者的註冊頁面，學習並鞏固複雜正規表示式的驗證技術。

正規表示式的應用

相關文章