JS 正規表達式：Email、電話、密碼等常用表單驗證範例

JavaScript 正規表達式：台灣手機號碼、Email、密碼強度與常用表單驗證範例

在前端網頁開發與 HTML 表單互動中，驗證使用者輸入的數字、字串格式是常見的需求。無論是處理價格計算、欄位格式限制還是資料清理，JavaScript 正規表達式（Regular Expression）都是不可或缺的工具。本篇專為前端工程師與 RD（研發人員）打造，直接提供台灣手機號碼、Email、密碼強度等高頻使用的正規表達式語法、核心參數對照與生產環境複製即用範本。

核心複製即用範本與規格對照

為了讓開發者能在開發表單驗證時快速查找，本節直接整理 JavaScript 正規表達式（RegExp）中最核心的特殊字元與修飾詞（Flags）規格對照表。

核心維度	語法／符號	說明與作用
行首匹配	^	限制字串必須以該條件開頭；若置於 [] 內則代表否定（例如 [^A] 代表開頭非 A）。
行尾匹配	$	限制字串必須以該條件結尾。
數字字元	\d	等同於 [0-9]，匹配任意單一數字。
全域搜尋	/g (Global)	搜尋整個字串中所有符合條件的內容，常搭配 replace() 使用。

---

JavaScript 正規表達式基本語法與 Flags 修飾詞

在 JavaScript 中，正規表達式的宣告通常以斜線 / 作為開頭與結尾，或透過建構函式建立：

// 字面值寫法
let regex = /^\d{1,3}$/;

// 建構函式寫法
let regexObj = new RegExp(/^\\d{1,3}$/);

RegExp Flags 修飾詞行為差異

當我們在正規表達式結尾加上不同的 Flags 時，會直接影響比對的範圍與行為：

let targetStr = " 123 abc ";

// 使用 /g (全域搜尋) 會取代所有符合的字元
let resultGlobal = targetStr.replace(/ /g, '');
console.log(resultGlobal); // 輸出 "123abc"

// 使用 /i (忽略大小寫，此處以空格為例)
let resultCase = targetStr.replace(/ /i, '');
console.log(resultCase); // 輸出 "123 abc "（僅取代第一個找到的符合項目）

---

常見表單驗證生產環境範本

以下整理在實務開發中最高頻使用的各類表單驗證正規表達式，開發者可直接複製並根據專案需求進行調整。

1. 台灣手機號碼驗證

規定必須以 09 開頭，且後續接 8 位數字：

let phoneRegex = /^09\d{8}$/;

console.log(phoneRegex.test('0912345678')); // true
console.log(phoneRegex.test('0812345678')); // false

2. 純數字位數驗證

限制輸入必須為指定長度的純數字（例如最少 6 位數字）。關於限制 input 欄位只能輸入數字的詳細實作，可參照 RegExp 表單驗證 input 只輸入數字：

let numberRegex = /^\d{6}$/;

console.log(numberRegex.test('123456')); // true
console.log(numberRegex.test('12345'));  // false

3. Email 電子郵件格式驗證

基本的電子郵件結構驗證，確保包含 @ 符號與網域結構：

let emailRegex = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;

console.log(emailRegex.test('[email protected]')); // true
console.log(emailRegex.test('userexample.com'));   // false

4. 密碼強度驗證

規定長度為 6 到 16 字元，且必須同時包含至少一個大寫英文、小寫英文與數字：

let passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/;

console.log(passwordRegex.test('Abc12345')); // true
console.log(passwordRegex.test('abc12345')); // false（缺少大寫字母）

5. 帳號格式驗證

規定長度為 6 到 20 字元，開頭必須為大寫英文字母，且必須包含大小寫英文與數字：

let accountRegex = /^[A-Z]{1}(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/;

console.log(accountRegex.test('A1b2c3d')); // true
console.log(accountRegex.test('a1b2c3d')); // false（開頭非大寫英文）

---

開發者常見 Q&A

Q1：為什麼傳入空字串或 null 時，test() 方法會回傳 false？

Ans：當正規表達式開頭有設定 ^ 且結尾有 $ 時，代表字串必須完全符合該條件。空字串 ''、null、undefined 或 NaN 在進行轉型與長度比對時不符合模式，因此 test() 會回傳 false。

Q2：如何確保 input 輸入框完全不能輸入空白字元？

Ans：可以使用全域取代的方式，在使用者輸入觸發 input 事件時，利用 /g 修飾詞將空白過濾掉：

let cleanStr = userInput.replace(/\s/g, '');

Q3：test() 與 match() 方法有什麼差別？

Ans：test() 回傳的是布林值（true / false），專門用於條件判斷與表單驗證；而 match() 則是回傳符合條件的陣列內容或 null，適用於需要擷取特定字串片段的場景。

參考資料與延伸閱讀

• MDN Web Docs：RegExp 物件與正規表達式語法指南
• MDN Web Docs：RegExp.prototype.test() 方法說明
• MDN Web Docs：String.prototype.replace() 與正規表達式應用
• MDN Web Docs：字元集與斷言語法（Character classes 與 Assertions）
• MDN Web Docs：群組與後向參照（Groups and backreferences）
• 延伸閱讀：JS 正規表達式 – 常用 RegExp 表單驗證範例
• 延伸閱讀：Input RegExp 表單驗證 – 只輸入數字