紀錄工作經驗、相關知識,解決技術相關問題。

Javascript

JS 正規表達式 – 常用 RegExp 表單驗證範例

Regular Expression

Regular Expression

在 HTML input 輸入中,判斷數字、字串,是製作網頁必備技能,尤其前端,還得處裡各種顯示模式,比如價格、補0…等等,這時就是用到正規表達式(regex)的時候了。

什麼是正規表達式

正規表達式,英文 Regular Expression,又常簡稱為 RegExp, RegEx,有的簡稱為 RE (縮寫有時就是這麼樸實無華),中文又稱【規則運算式】、【正規表示式】。

正規表達式,白話說,主要用在有規律的資料判斷,比如一組電話、身分證字號是否正確,常見的輸入是否全是數字等等,更多的運用會在資料數值的分析上,想看官方說明可以到 維基百科 – 正規表達式

有曾經聽人說這叫「正則表達式」,網路上找也的確找的到資料,but 隨著時間推移,你會發現該說法變少了,可能是翻譯或教學單位一時口誤問題的影響(無從口考證),所以想找相關範例,還是建議搜尋正規表達式

正規表達式 RegExp 中的特殊符號

有意義的特殊符號很多,以下整理較為常用的特殊符號,並用簡短的白話解釋,希望新手能比較看得懂 :

特殊字元說明
\一般作為跳脫字元,但 \b 與 \n 除外,\b 可以當作空白,\n 當作換行,例如 /\bis\b/,判斷 “It is” 是 true ,判斷 “It’s ” 是 false。
^匹配開頭,要以某個條件為開頭
但擺放在中間,則是另一個否定的意思,如 [^A]代表開頭不為A。
$匹配結尾,要以某個條件為結尾
[]一個判斷的集合,看你要判斷什麼
如[0-9]代表判斷是否有 0~9
如[AB]代表判斷是否有 A,B
\d代表著數字 [0~9]
\w代表著[A-Za-z0~9_]
{x,y}限制一個長度,{ 最小長度,最大長度 },最大長度非必填,如 {2} 代表至少長度 2,不能負數。
*匹配前一個字元 0 次到 n 次。
+匹配前一個字元 1 次到 n 次,等同於 {1}。
?匹配前一個字元 0 ~ 1 次,等同 {0,1}。
RegExp 常用特殊符號與說明

如果想看完整的官方介紹版本,可以參照 維基百科MDN,這兩個是個人看過,覺得寫得還算清楚的。

如何使用 JS 正規表達式 RegExp

說明

RegExp 的使用以 /為開始,/ 為結束,例如:

let regex = new RegExp(/你的正規表達式/);

注意事項 – Regular Expression flags 修飾詞

這英文稱之為 Regular Expression flags,flags 中文翻譯為修飾詞,所以你也可以簡稱為 RegExp flags

RegExp flags 的部分,就是你需要注意的,最平常的是以 / 做結尾,但很多時候你會看到 /g 或是 /i,這兩個意思大不同。

所以在此之前,你需要先知道各個結尾的表示,代表著不同的含意,千萬不要用錯了。

RegExp Flags說明
/g全域搜尋,你可以想成是全部字串。
/i不分大小寫的搜尋
/m多行搜尋
RegExp Flags 與相關說明

其他的還有像是 /u , /y,如果你想看詳細的官方說明,可以到 MDN 去觀看。

RegExp Flags g 範例

let s = " 123 abc ";
s1 = s.replace(/ /g, '');
console.log(s1)

// 執行結果
"123abc"

RegExp Flags i 範例

let s = " 123 abc ";
s2 = s.replace(/ /i, '');
console.log(s2)

// 執行結果
"123 abc "

教學

JS 的用法不多說,直接來看例子吧。

假如我們要判斷輸入的金額,不能超過1000元,可以這麼寫。

// 宣告判斷一個百位數字以內的值
let regex = new RegExp(/^\d{1,3}$/);

然後我們分別輸入不同解數值來看看結果。

// 輸入 1000 以內數字
console.log(regex.test(999));

// 輸入 1000 數字
console.log(regex.test(1000));

// 輸入 1000 字串
console.log(regex.test('1000'));

// 輸入以內數字 + 字串
console.log(regex.test('dec999abc'));

// 輸入開頭、結尾都是數字的字串
console.log(regex.test('999abc123'));

執行結果:

// 輸入 1000 以內的數字
true

// 輸入 1000 數字
false

// 輸入 1000 字串
false

// 輸入以內數字 + 字串
false

// 輸入開頭、結尾都是數字的字串
false

教學 – 空值與錯誤輸入

我們再來輸入 JS 中常見的幾種空值與錯誤輸入時的狀態:

// 輸入 NULL
console.log(regex.test(null));

// 輸入 空字串
console.log(regex.test(''));

// 輸入 undefined
console.log(regex.test(undefined));

// 輸入 NaN
console.log(regex.test(NaN));

執行結果:

// 輸入 NULL
false

// 輸入 空字串
false

// 輸入 undefined
false

// 輸入 NaN
false

以上是簡單的範例,由此範例可以看出,只要你熟練地運用 RegExp ,在面對 JS 相關輸入時,不論其結果如何,都能有效判斷是否正確。

正規表達式 RegExp 常用表單驗證

電話驗證

// 台灣手機驗證
let regex = new RegExp(/^09[0-9]{8}$/)

數字驗證

// 最少 6 位數字
let regex = new RegExp(/^[0-9]{6}$/)

相關文章:RegExp 表單驗證 input 只輸入數字

信用卡卡號驗證

// 4組 4位數字
let regex = new RegExp(/^\d-\d-\d-\d$/)

帳號驗證

// 6 ~ 20 字中英文組成
// 開頭英文大寫
// 至少包含 1 個大小寫英文
// 至少包含 1 個數字
let regex = new RegExp(/^[A-Z]{1}(?=.*\d)(?=.*[a-zA-Z]).{6,20}$/)

密碼驗證

// 6 ~ 16 字中英文組成
// 至少包含 1 個大寫英文 與 小寫英文
// 至少包含 1 個數字
let regex = new RegExp(/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,16}$/)

Email 驗證

let regex = new RegExp(/^[^@\s]+@[^@\s]+\.[^@\s]+$/)

發表迴響