Jonas's Blog

JavaScript 的正規式（Regular expressions）是一個內建的物件，
其建構函示（Construction functoin）為 RegExp，典型用法如下：

<font>
re = new RegExp("pattern", "flag")
</font>

上述用法也可以寫成：

<font face="helvetica,arial">
re = /pattern/flag
</font>

其中，pattern 代表以正規表示法來顯示的字串，flag 則是比對的方式。
flag 的值可能有三種，分別解釋如下：

• g：全域比對（Global match）
• i：忽略大小寫（Ignore case）
• gi：全域比對並忽略大小寫

舉例來說，我們的身份證字號的格式是由一個英文字母加上九個數字組合而成，
如果我們要求使用者輸入身份證字號，就可以使用 JavaScript 的正規表示法來驗證其格式的正確性。
例如，我們可用下列表單來要求使用者輸入身份證字號：

身份證字號：（第一個英文字母需大寫）

在上例中，我們利用 onBlur 事件來進行正規式的比對，換句話說，當使用者填完資料，
要離開此欄位的時候，JavaScript 即會測知 onBlur 事件，並呼叫函數 checkID() 來對填入的資料進行驗證。
（欲測試其效果，只需刪除欄位內的任一個字元，再到欄位外點一下，就可以看到警告視窗了。）
相關原始碼如下：

<script>
function checkID(formElement)
{
    re = /^[A-Z]\d{9}$/;
    if (!re.test(formElement.value))
        alert("你的身份證號碼格式不對！");
}
</script>
<form>
<font>身份證字號：
<input value="A000000000" onblur="checkID(this)" type="text">（第一個英文字母需大寫） </font>
</form>

在上述原始碼中，/^[A-Z]\d{9}$/ 就是一個正規式， [A-Z] 代表由 A 至 Z 的所有可能英文字母，
\d 代表由 0 至 9 的數目字（事實上也可以寫成 [0-9]），{9} 則代表需要有九個數目字，
^ 代表字串開始位置，$ 代表字串結束位置，因此 /^[A-Z]\d{9}$/ 就代表可以比對身份證字號的正規式。
formElement.value 代表使用者輸入的字串，re.test() 則會傳回 true 或 false，代表比對是否成功。
若要不限定是大寫英文字母，只需將正規式改成 /^[a-zA-Z]\d{9}$/g 就可以了！
（注意：若不加入 ^ 和 $，那麼 /[A-Z]\d{9}/ 就會比對到其他不合法的身份證字號，
例如 AGF123456789 或是 F1234567890 等。
因此，加入 ^ 和 $ 可保證比對正確的字串一定是由由一個大寫英文字母加上九個數字所構成。）

另一個簡單的例子，是要求使用者輸入信用卡號碼，這是一組16個數字的號碼，例如：
信用卡號碼：（格式：xxxx-xxxx-xxxx-xxxx）
當 onBlur 發生時，換句話說，JavaScript 會呼叫函數 checkCreditCard( ) 來對填入的資料進行驗證。
相關原始碼如下：

<script>
function checkCreditCard(control)
{
    re = /^\d{4}-\d{4}-\d{4}-\d{4}$/;
    if (!re.test(control.value))
        alert("你的信用卡號碼不符合「xxxx-xxxx-xxxx-xxxx」的格式！");
}
</script>
<form>
<font>信用卡號碼：<input value="xxxx-xxxx-xxxx-xxxx" onblur="checkCreditCard(this)" type="text">
（格式：xxxx-xxxx-xxxx-xxxx） </font>
</form>

在上例中，很顯然地，/^\d{4}-\d{4}-\d{4}-\d{4}$/ 就代表正確的信用卡格式。

下一個例子，則是用正規表示法來驗證使用者的英文名字，例如：
你的英文全名：（格式：First Last 或 First Middle Last）
當 onBlur 發生時，換句話說，JavaScript 會呼叫函數 checkEnglishName( ) 來對填入的資料進行驗證。
相關原始碼如下：

<script>
function checkEnglishName(control)
{
    re1 = /^[A-Za-z\-]+\s+[A-Za-z\-]+$/;
    re2 = /^[A-Za-z\-]+\s+[A-Za-z\-]+\s+[A-Za-z\-]+$/;
    if (!re1.test(control.value) && !re2.test(control.value))
        alert("你的英文名字格式不對！");
}
</script>
<form>
<font>你的英文全名：<input value="" onblur="checkEnglishName(this)" type="text">
（格式：First Last 或 First Middle Last） </font>
</form>

正規式物件的方法可列表如下：

在上述範例中，我們只用到了正規式物件的 test() 方法來判斷比對是否成功，。

在進行表單資料驗證之前，我們應先進行表單資料修改，例如拿掉不必要的空格、英文字母大小寫轉換等，
這些工作也可以由字串的 replace() 方法或正規式的 exec() 方法來達成。

在下列的表格中，我們使用幾個簡單的範例來對正規式的應用做較完整的說明：

請注意在上表中，"^" 在兩條斜線中，代表一個字串的開始位置，因此 /^xy/ 代表以 "xy" 開始的字串。
同理，"$" 在兩條斜線中，代表一個字串的結束位置，因此 /xy$/ 代表以 "xy" 結束的字串。
但是如果將 "^" 放在兩個方括弧中，就代表「否定」，因此 [^aeiouAEIOU] 代表不含母音之字串。

有些正規式會常被用到，因此已被定義為特定字元，這些字元可列表說明如下：

此外，我們可定義字元的重複次數，如下：

各位現在已經可以慢慢體會到正規表示式的威力了！利用同樣的方法，我們可以對各式各樣的表單輸入進行驗證。

注意事項：

以 RegExp(pattern, flag) 的方式來建立正規式物件時，若 pattern 包含以反斜線開頭的特殊字元
（例如 \d、\w、\s 等）時，我們必須再加上一個反斜線來保留其特殊意義。例如：

<font face="helvetica,arial">
re = /\d+\s\w+/g
</font>

以 RegExp 為主的等效表示法為：

<font face="helvetica,arial">
re = new RegExp("\\d+\\s\\w+", "g");
</font>