/

如何在JavaScript中驗證電子郵件地址

如何在JavaScript中驗證電子郵件地址

有很多方法可以驗證電子郵件地址。學習正確的方法，並了解使用純JavaScript的所有選項。

在處理表單時，驗證電子郵件地址是常見的操作之一。

在聯繫表單、註冊和登錄表單等方面非常有用。

有些人認為根本不應該對電子郵件進行驗證。我認為少量的驗證，不要過度追求完美，是更好的選擇。

電子郵件驗證應遵循哪些規則？

電子郵件地址由兩部分組成：本地部分和域名部分。

本地部分可以包含

  • 任何字母或數字字符：a-zA-Z0-9
  • 標點符號："(),:;<>@[\]
  • 特殊字符：!#$%&'*+-/=?^_``{|}~
  • 點號.，如果它不是第一個或最後一個字符。而且不能重複出現。

域名部分可以包含

  • 任何字母或數字字符：a-zA-Z0-9
  • 橫槓-，如果它不是第一個或最後一個字符。可以重複出現。

使用正則表達式

驗證電子郵件地址的最佳選擇是使用正則表達式。

沒有一個通用的電子郵件驗證正則表達式。大家似乎都在使用不同的驗證方法，而大多數在線找到的正則表達式將無法通過最基本的電子郵件場景驗證，原因可能是不準確，或者並沒有計算新引入的域名或國際化電子郵件地址。

不要盲目使用任何正則表達式，請先檢查一下。

我在Glitch上建立了這個例子，它將檢查一個被認為有效的電子郵件地址列表是否通過正則表達式驗證。您可以更改正則表達式並將其與您想使用的其他正則表達式進行比較。

當前添加的正則表達式是我認為最準確的，稍微經過修正以解決多個點的問題。

注意：這不是我想出來的。我在一個Quora答案中找到它，但我不確定它是否是原始來源。

這是一個使用該正則表達式進行驗證的函數：

1
2
3
4
5
const validate = (email) => {
  const expression = /(?!.\*\.{2})^([a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'\*+\-\/=?^\_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)\*|"((([ \t]\*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))\*(([ \t]\*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-.\_~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]\*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i;

  return expression.test(String(email).toLowerCase());
};

這滿足了所有常見情況，可以假設99.9％的用戶添加的電子郵件地址都可以成功驗證。

此Glitch上的代碼包含其他可以通過重新發布該項目輕松嘗試的正則表達式。

儘管相當準確，但這個正則表達式在一些邊界情況下存在一些問題，根據您的需求，您可以忽略這些問題。

對於奇怪的地址存在假陰性，例如

1
2
3
"very.(),:;<>[]".VERY."very@\ "very".unusual"@strange.example.com

one."more\ long"@example.website.place

對於本機地址存在假陰性，例如

1
2
[[email protected]](/cdn-cgi/l/email-protection)
[[email protected]](/cdn-cgi/l/email-protection)

在公開訪問的網站上幾乎沒有用處（對於在公開訪問的網站上禁用這些地址實際上是一個優勢）

同樣，在基於IP的電子郵件上有假陽性

1
2
user@[2001: DB8 :: 1]
[[email protected]](/cdn-cgi/l/email-protection)

對於本地部分過長的地址存在假陽性

1
12345678901234[[email protected]](/cdn-cgi/l/email-protection)

您需要一個更簡單的正則表達式嗎？

上面的正則表達式非常複雜，以至於我甚至不嘗試去理解它。正規表達式大師們創建了它，並且在互聯網上流傳開來，直到我找到它為止。

在這一點上，使用它只是一個複製/粘貼的問題。

一個更簡單的解決方案只是檢查輸入的地址是否包含某個內容，然後是 @ 符號，然後是其他內容。

在這種情況下，使用以下正則表達式即可：

1
2
const expression = /\S+@\S+/;
expression.test(String('[[email protected]](/cdn-cgi/l/email-protection)').toLowerCase());

這將導致許多誤報，但畢竟對電子郵件地址的最終驗證是在您請求用戶點擊電子郵件中的某個內容以確認地址的時候進行的，我寧願嘗試發送到無效的電子郵件地址，也不願因為我的正則表達式中的錯誤而拒絕有效的電子郵件。

這個在上面的Glitch中列出，所以您可以輕松嘗試它。

直接驗證HTML字段

HTML5 提供了 email 字段類型，所以不要忘記您還可以使用這種方式驗證電子郵件：

1
<input type="email" name="email" placeholder="Your email" />

根據瀏覽器的實現，這種驗證的結果也會有所不同。

這個Glitch展示了我使用正則表達式測試過的相同郵件，以及它們通過HTML表單驗證後的結果。

結果是有趣的，這裡也有一些無效的電子郵件通過了驗證，而一些有效的電子郵件則沒有通過。我們的正則表達式實際上比瀏覽器內置的HTML過濾器做得更準確。

在服務器端進行驗證

如果您的應用程序有一個服務器，服務器也需要驗證電子郵件，因為您無法相信客戶端代碼，並且JavaScript可能在用戶瀏覽器中被禁用。

使用Node.js，您可以重複使用前端代碼，正如上面的驗證函數可以在客戶端和服務器端都工作。

您還可以使用預製的包，如isemail，但在這種情況下，結果也會有所不同。這裡是相同郵件的isemail基準測試：https://glitch.com/edit/#!/flavio-email-validation-node-isemail

tags: [“JavaScript”, “email”, “validation”, “regex”]