iT邦幫忙

10

[Javascript] Regular Expression – Email 表單驗證

divaka 2012-07-11 23:16:4036566 瀏覽

整理了一些網路上的資源,並以 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#

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


2 則留言

0
ted99tw
iT邦高手 1 級 ‧ 2012-07-11 23:28:15

實用的內容!推+1

讚讚讚

zuyan iT邦好手 1 級‧ 2013-07-29 11:14:17 檢舉

難得泰哥回文是一般人回文的方式...
看來是還沒吃藥...哈哈

0
zuyan
iT邦好手 1 級 ‧ 2013-07-29 11:21:01

正則表示法.....
我跟你不熟,不過看了這篇我有進一步的認識了

zuyan iT邦好手 1 級‧ 2013-07-29 11:24:55 檢舉

我偷懶都用 Dreamwave 欄位檢查功能..

我要留言

立即登入留言