整理了一些網路上的資源，並以 Email 格式驗證為範例來講解 Javascipt 當中的 Regular Expression 用法

首先完全不懂 Regular Expression 的人
建議可以看我整理的這份文件, 來了解 Regular Expression 當中每個元素的定義
https://docs.google.com/document/d/1bUq0Jb1mLM7zmcVjDyLIX6UTLWGbKp-d99-w4rMrjvg/edit
那我們就來開始解析 Email 驗證的 Regular Expression 用法吧
首先，我們來看看一般 Email 的格式
以我的 Email 為例：foxfirejack@gmail.com

我們可以知道幾個基本規則：
(1) 中間一定會有 @
(2) @ 前面一定是英文 (大小寫皆可)
(3) @ 後面一定是「英文 or 數字」 + 「.」 的組合
(4) 結尾一定是英文

另外，合法的 Email 可能還有
fox.fire-jack@gmail2.com

所以我們又發現以下幾個規則
(1) 在 @ 前面及後面可以用 「-」或是「.」
(2) 在 @ 前面及後面的 「-」及「.」不能連在一起

不合法的 Email 可能有
foxfire-.jack@gmail-.com2
.@gmail.com
–@gmail.com
foxfirejack@gmail

因為
(1) 最後一個字元只能是大小寫英文
(2) 在 @ 前面及後面都不能連續出現「-」及「.」，例如「-.」、「–」、「..」、「.-」
(3) 開頭一定要是英文或數字
(4) @ 後面一定有 「.」

總而言之，一個正確的 Email ，可能會有以下規則：
(1) 必須以一個以上的文字&數字開頭
(2) @ 之前可以出現 1 個以上的文字、數字與「-」的組合，例如 -abc-
(3) @ 之前可以出現 1 個以上的文字、數字與「.」的組合，例如 .abc.
(4) @ 之前以上兩項以 or 的關係出現，並且出現 0 次以上
(5) 中間一定要出現一個 @
(6) @ 之後出現一個以上的大小寫英文及數字的組合
(7) @ 之後只能出現「.」或是「-」，但這兩個字元不能連續時出現
(8) @ 之後出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合
(9) @ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文

所以，我們就可以用以下的 Javascript 語法來檢驗 Email 格式是否正確

//please input the test email to see is valid
var strEmail = “foxfirejack@gmail.com”;
 
//Regular expression Testing
emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;
 
//validate ok or not
if(strEmail.search(emailRule)!= -1){
    alert("true");
}else{
    alert("false");
}​

首先，前後一定要用 「/」「/」 包起來，才表示是 Regular Expression 的語法
幾個重要符號代表如下：

「^」 表示是開始必須符合的格式
「$ 」表示是結尾必須符合的格式
「\w」表示英文或數字
「\d」表示只能為數字
「\.」表示 「.」，前面的 \ 為跳脫字元 (escape)
「\-」表示 「-」，前面的 \ 為跳脫字元 (escape)
「|」表示 or ，即左右兩邊只能出現其中一個
「+」表示出現 1 次以上
「*」表示出現 0 次以上
「A-Z」表示英文大寫 A ~ Z
「a-z」表示英文小寫 a ~ z
「0-9」表示數字 0 ~ 9，同「\d」
[A-Za-z0-9] 表示大小寫英文及數字的組合

重點是在 emailRule 那句話，我們來看看它是怎樣對應的

emailRule = /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z]+$/;




// ^\w+：@ 之前必須以一個以上的文字&數字開頭，例如 abc
// ((-\w+)：@ 之前可以出現 1 個以上的文字、數字或「-」的組合，例如 -abc-
// (\.\w+))：@ 之前可以出現 1 個以上的文字、數字或「.」的組合，例如 .abc.
// ((-\w+)|(\.\w+))*：以上兩個規則以 or 的關係出現，並且出現 0 次以上 (所以不能 –. 同時出現)
// @：中間一定要出現一個 @
// [A-Za-z0-9]+：@ 之後出現 1 個以上的大小寫英文及數字的組合
// (\.|-)：@ 之後只能出現「.」或是「-」，但這兩個字元不能連續時出現
// ((\.|-)[A-Za-z0-9]+)*：@ 之後出現 0 個以上的「.」或是「-」配上大小寫英文及數字的組合
// \.[A-Za-z]+$/：@ 之後出現 1 個以上的「.」配上大小寫英文及數字的組合，結尾需為大小寫英文

透過以上的語法，我們就可以用一句話來判斷使用者輸入的 Email 格式到底正不正確
而不是寫超多層的 if else 來判斷 (筆者過去也這樣寫過)
你可以自己玩看看一下 jsFiddle，自己改變語法或是 Email 測試：
http://jsfiddle.net/divaka/aFDjX/light/

了解了這個範例以後
相信之後看到這些奇怪的符號，就不會這麼頭痛了

另外，我也整理了網路上的一些 JavaScript 表單驗證功能，整理成這份文件
https://docs.google.com/document/d/1mSxRmAUx-rm0wJ9MtkISwTemZmilFguXhMLavy-zxkg/edit#

未來也會持續增加內容，歡迎大家以後到那邊尋找資源