[Javascript] Regular Expression – Email 表單驗證

【如果覺得文章寫的好的話希望能按一下讚或分享喔】

image

最近看了 Javascript 的 Regular Expression

發現其實並沒有想像中的難

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

首先完全不懂 Regular Expression 的人

建議可以看我整理的 這份文件

來了解 Regular Expression 當中每個元素的定義

 

那我們就來開始解析 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 測試:

 

了解了這個範例以後

相信之後看到這些奇怪的符號,就不會這麼頭痛了

 

另外,我也整理了網路上的一些 JavaScript 表單驗證功能,整理成 這份文件

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

Related Posts Plugin for WordPress, Blogger...
【如果覺得文章寫的好的話希望能按一下讚或分享喔】

彭其捷

想要做出很棒的產品,所以我寫程式,也研究介面 (UI) 與使用者經驗 (UX),並思考管理的法則。

【Profile】http://about.me/divaka

twitter facebookgooglepluslinkedinbloggertumblrflickryoutubedribbblerssemail


Fatal error: Uncaught Exception: 12: REST API is deprecated for versions v2.1 and higher (12) thrown in /home/content/63/7692663/html/blog/wp-content/plugins/seo-facebook-comments/facebook/base_facebook.php on line 1273