如何使用 JavaScript 有效驗證電子郵件地址？

JavaScript 電子郵件驗證：綜合指南

驗證電子郵件地址對於 Web 開發中至關重要，可確保有效提交並防止垃圾郵件。在 JavaScript 中，有幾種方法可以執行電子郵件驗證。

正規表示式：黃金標準

正規表示式為電子郵件驗證提供了強大且可靠的方法。它們允許您定義準確匹配有效電子郵件結構的複雜模式。以下是處理 Unicode 字符的綜合正則表達式的示例：

const re = /^(([^<>()\[\]\.,;:\s@"]+(\.[^<>()\[\]\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/i;

此表達式匹配從字符串“^”開頭到結尾“$”的所有字符，確保整個電子郵件地址已驗證。它包括檢查：

• 本地部分：在第一個捕獲組中定義，包含除尖括號、括號、反斜線、方括號、逗號、分號、冒號、空格和引號之外的任何有效字元.
• 域部分：在第二組中捕獲，支援IPv4 位址或完全限定域名稱。
• 頂級域：由第三個捕獲組匹配，允許兩個或更多字母字元。

真實範例

驗證JavaScript 中的電子郵件地址，您可以使用以下函數：

const validateEmail = (email) => {
  return email.match(re);
};

呼叫validateEmail(email) 將傳回如果電子郵件有效，則傳回一個陣列；如果驗證失敗，則傳回null。

使用 JavaScript 進行客戶端驗證

可以使用 JavaScript 在客戶端實作電子郵件驗證。下面是一個範例：

const emailInput = document.getElementById('email');
emailInput.addEventListener('input', () => {
  const result = document.getElementById('result');
  const email = emailInput.value;
  if (validateEmail(email)) {
    result.textContent = `${email} is valid.`;
    result.style.color = 'green';
  } else {
    result.textContent = `${email} is invalid.`;
    result.style.color = 'red';
  }
});

此程式碼建立一個輸入欄位和一個結果元素。當使用者輸入電子郵件時，它會檢查有效性並以適當的樣式顯示結果。

伺服器端驗證：關鍵步驟

請記住，僅 JavaScript 驗證是不夠的。使用者可以輕鬆停用 JavaScript，從而使驗證無效。因此，有必要使用類似的技術在伺服器端進行驗證，以確保準確性並防止惡意嘗試。

以上是如何使用 JavaScript 有效驗證電子郵件地址？的詳細內容。更多資訊請關注PHP中文網其他相關文章！