3種在JavaScript中驗證電子郵件位址的方法

​

如何使用JavaScript驗證email的正确性？今天這個内容将做一個小小的總結，希望對你有所幫助。

方式一：簡單驗證

對于想要以以下形式進行真正簡單驗證的人

[email protected]      

正規表達式：

/\S+@\S+\.\S+/      

要防止比對多個@ 符号（推薦使用）：

/^[^\s@]+@[^\s@]+\.[^\s@]+$/      

JavaScript 函數示例：

function validateEmail(email) {
   var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
   return re.test(email);
}
console.log(validateEmail([email protected]'));      

這樣能保證使用者輸入的郵箱沒有明顯的錯誤，絕大部分是正确的，而且效率是最高的。

方式二：官網标準

官方标準稱為RFC 2822。它描述了有效電子郵件位址必須遵守的文法。使用這個正規表達式來實作它：

(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])      

如果我們省略使用雙引号和方括号的文法，我們将獲得更實用的 RFC 2822 實作。它仍然會比對今天實際使用的所有電子郵件位址的 99.99%。

[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?      

方式三：html5表單驗證

html5 本身具有電子郵件驗證功能。如果您的浏覽器支援 HTML5，那麼您可以使用以下代碼。

<form>
  <input type="email" placeholder="[email protected]" required>
  <input type="submit">
</form>      

隻需檢查輸入的電子郵件位址是否有效或不使用 HTML，無需編寫用于驗證的函數。

需要注意的是：存在浏覽器相容性。

學習更多技能

請點選下方公衆号

​