正規表示式做欄位驗證+常用規則 === 網頁的表單中，輸入框常會需要做驗證，阻擋使用者亂輸入無效的值。 除了後端需要做防呆的驗證，前端再call api送資料給後端前，也應該做欄位驗證，而不是當使用者填完表單的一堆資料，最後call api才回傳錯誤告訴使用者，這樣的使用者體驗是很不好的。 我們要來使用前端javascript搭配正規表示式來做驗證匹配字串。 :::warning 參考這篇 [正規表示式：寫法規則介紹](https://hackmd.io/@eating-coding/SJzEblwkY) 複習正規表示式！ ::: javascript 驗證匹配 --- 在javascript中，可以使用 ```test``` 、 ```match``` 、 ```exec``` 語法來做正規表示式。 簡單範例：驗證是否為純數字 ```javascript=1 const regex = /^[0-9]+$/; // 驗證規則 // 待驗證的測試字串 let testString1 = "12345"; // 可驗證成功 let testString2 = "12a34"; // 驗證失敗 ``` test() --- 驗證回傳：boolean(布林值)，成功 ```true```，失敗 ```false``` ```javascript=1 regex.test(testString1); // true regex.test(testString2); // false ``` match() --- match 為 String 物件的方法 驗證回傳：匹配結果Array(陣列)，沒有匹配則回傳null ```javascript=1 testString1.match(regex); // ["12345", index: 0, input: "12345", groups: undefined] testString2.match(regex); // ["12", index: 0, input: "12a34", groups: undefined] ``` exec() --- exec 為 RegExp 物件的方法 這邊驗證規則也可改寫成RegExp物件 第二個參數"g"代表回傳所有匹配結果，沒有傳入則只會回傳第一個匹配結果 ```javascript=1 // 驗證規則:改寫成RegExp物件 const regex = new RegExp("[0-9]", "g"); ``` 驗證回傳：匹配結果Array(陣列)，沒有匹配則回傳null ```javascript=1 regex.exec(testString1); // ["12345", index: 0, input: "12345", groups: undefined] regex.exec(testString2); // ["12", index: 0, input: "12a34", groups: undefined] ``` :::warning 使用 ```test``` 、 ```match``` 和 ```exec``` 的差異： ::: --- 以下為常用的驗證規則： Email 電子信箱 --- 驗證規則：==任何字元(可包含-+.符號) + @ + 任何字元 + . + 任何字元== EX: test@mail.com ```javascript= const regex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/; ``` 密碼 --- 驗證規則：==8~12碼 至少一個英文(大寫或小寫) + 一個數字 + 一個特殊符號(!@#$.%^&*\)== EX: abc.123abc ```javascript= const regex = /^(?=.*[0-9])(?=.*[a-zA-Z])(?=.*[!@#$.\%\^\&\*\(\)])[0-9a-zA-Z!@#$.\%\^\&\*\(\)]{8,12}/; ``` 純數字 --- 驗證規則：==數字 0~9== EX: 1234 ```javascript= const regex = /^[0-9]+$/; ``` 英數混合 --- 驗證規則：==英文大小寫 數字 0~9== EX: 12abc34 ```javascript= const regex = /^[A-Za-z0-9]+$/; ``` 中文字元 --- 驗證規則：中文字元區間 ==\u4e00 ~ \u9fa5== EX: 這是一段中文 ```javascript= const regex = /^[\u4e00-\u9fa5]+$/; ``` 台灣手機號碼 --- 驗證規則：==09開頭 + 8碼數字== EX: 0912345678 ```javascript= const regex = /^09[0-9]{8}$/; ``` 中國手機號碼 --- 驗證規則：==1開頭 + 10碼數字== EX: 11234567890 ```javascript= const regex = /^1[0-9]{10}$/; ``` 台灣身分證字號(簡易版) --- 驗證規則：==第一碼區碼大寫英文 + 第二碼性別1或2 + 8碼數字== EX: A112345678 ```javascript= const regex = /^[A-Z][12]\d{8}]$/; ``` 台灣統一編號 --- 之後補上 > 上一篇：[正規表示式：寫法規則介紹](https://hackmd.io/@eating-coding/SJzEblwkY) ###### tags: `Javascript` `前端開發筆記`