JavaScript 郵箱驗證正則表達式深度解析與最佳實踐

郵箱地址規範（RFC 5322 簡化版）

一個合法郵箱 = 本地部分 + @ + 域名部分

• 本地部分：字母、數字、特殊字符 !#$%&'*+/=?^_`{|}~-、點 .（不可首尾、不可連續）
• 域名部分：標籤由字母、數字、連字符組成，標籤間用點分隔，頂級域至少 2 字母

完全符合 RFC 5322 的正則極其複雜（上千字符），實際項目通常採用實用主義子集。

常見正則對比

1. 簡易版（僅做基本格式攔截）

/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/

• 允許：test@hotmail.com, te-st@qq.com.cn, te_st@sima.vip.com
• 誤判：te.._st@sima.vip.com（連續點）會通過

2. 進階版（作者 fuchangxi 推薦，平衡嚴格度與兼容性）

/^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g

• 本地部分：字母數字、-、_、.，至少一個字符
• 域名：主域 [0-9a-z]+ + . + 頂級域 [a-z]{2,3}（如 com/net/org）+ 可選二級域 .[a-z]{2}（如 cn/jp）
• 攔截：首尾特殊字符、連續點、異常頂級域長度

3. HTML5 原生驗證（零代碼，瀏覽器內建）

<input type="email" name="email" required>

• 瀏覽器自動攔截明顯格式錯誤
• 規則與 HTML5 規範一致，較寬鬆（允許單標籤域名如 user@localhost）
• 需配合後端驗證，不可單獨依賴

JavaScript 完整驗證函數

function validateEmail(email) {
    // 推薦：進階版正則
    const regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/i;
    return regex.test(email);
}

// 測試用例
const testCases = [
    'test@hotmail.com',      // true
    'test@sima.vip.com',     // true
    'te-st@qq.com.cn',       // true
    'te_st@sima.vip.com',    // true
    'te.._st@sima.vip.com',  // false (連續點)
    'user@localhost',        // false (無頂級域)
    'user@.com',             // false (域名為空)
    '@domain.com',           // false (本地部分為空)
    'user@domain.c',         // false (頂級域過短)
    'user@domain.commmm',    // false (頂級域過長)
];

testCases.forEach(email => console.log(email, validateEmail(email)));

前後端協同驗證策略

避坑指南

1. 不要試圖 100% 符合 RFC 5322：正則過長難維護，且合法但極罕見格式（如帶引號、註釋、IP 域名）業務無意義。
2. 唯一可靠驗證 = 發送驗證碼/鏈接：格式合法 ≠ 郵箱存在 ≠ 用戶擁有。唯有「收到郵件並點擊」才能證明所有權。
3. 國際化域名（IDN）：支持中文域名需先 punycode 轉碼（如 用戶@例子.中國 → user@xn--fsq.xn--fiqs8s）。
4. 大小寫不敏感：域名部分不區分大小寫，正則加 /i 標誌。

採用「前端寬鬆攔截 + 後端嚴格校驗 + 驗證碼確權」三層防線，兼顧體驗與安全。