表單驗證常用到正規表示式,去檢查輸入的內容有沒有符合該欄位的規範,這篇帶你一步步認識!
{ 介紹 }
- 正規表示式 (英文簡寫:regexp或REex)
- 基本規則:
- /正規表示式/,用兩條斜線將正規表示式包起來。
- /^正規表示式$/,更能嚴格規定每個字詞,要是沒加上^開頭、$結尾,會在有達成條件之後,剩下要輸入什麼都可以,就比較沒能完整驗證。
- 正規表示式,就是驗證的輸入欄位內容格式。
{ 正規表示式 }
正規表示式 | 解說 | 用法 |
---|---|---|
^ | 比對內容的開始位置 | /^09/ : 內容要是09開頭 |
$ | 比對內容的結束位置 | /com$/ : 內容要是com結尾 /^com$/ : 內容只能是com |
字元 | ||
[A-Z] | 大寫英文字母 | /[A-Z]/ : 內容有大寫英文字母即可 |
[a-z] | 小寫英文字母 | /[a-z]/ : 內容有小寫英文字母即可 |
[0–9] | 數字 0 到 9 | /[0-9]/ : 內容有數字 0 到 9 即可 |
\d | 數字,等同 [0–9] | /\d/ : 內容有數字即可 |
\D | 非數字 | /\D/ : 內容有非數字即可 |
\w | 數字字母與底線,等同 [A-Za-z0–9_] | /\w/ : 內容有數字字母與底線即可 |
\W | 非數字字母與底線,等同 [^A-Za-z0–9_] | /\W/ : 內容有非數字字母與底線即可 |
\s | 空白字元 | /\s/ : 內容有空白字元即可 |
\S | 非空白字元 | /\S/ : 內容有非空白字元即可 |
[] | 要有括弧內的任何字元 | /[happy]/ : 只能有 happy 字元 |
[^] | 不能有括弧內的任何字元 | /[happy]/ : 不能有 happy 字元 |
次數 | ||
* | 0 次以上 | /^v*$/ : 要包含 v 至少 0 個 |
+ | 1 次以上 | /^v*$/ : 要包含 v 至少 1 個 |
? | 0 次或 1 次 | /^v?$/ : 要包含 v 至少 0 或 1 個 |
{x} | x 次 | /^v{3}$/ : 要包含 v 至少 3 個 |
{y,} | 最少 y 次 | /^v{1,}$/ : 要包含 v 至少 1 個 |
{x,y} | x 次到 y 次 | /^v{1,3}$/ : 要包含 v 至少 1 到 3 個 |
{ 常用的正則表示式 }
檢查項目 | 範例 |
---|---|
字串只能有英文與數字 | /^[a-zA-Z0-9]*$/ |
字串只能有英文 | /^[a-zA-Z]*$/ |
字串只能有數字 | /^[0-9]*$/ |
日期 (MM/DD/YYYY) | /^((0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01])[- /.](19|20)?[0-9]{2})*$/ |
日期 (YYYY/MM/DD) | #^((19|20)?[0-9]{2}[- /.](0?[1-9]|1[012])[- /.](0?[1-9]|[12][0-9]|3[01]))*$# |
西元生日 (YYYY-MM-DD) | /^\d{4}-\d{2}-\d{2}$/ |
身分證字號 | /^[A-Z]\d{9}$/ |
手機號碼 | /^09\d{8}$/ |
信用卡 | /^(?:4[0-9]{12}(?:[0-9]{3})?|5[1-5][0-9]{14}|6011[0-9]{12}|622((12[6-9]|1[3-9][0-9])|([2-8][0-9][0-9])|(9(([0-1][0-9])|(2[0-5]))))[0-9]{10}|64[4-9][0-9]{13}|65[0-9]{14}|3(?:0[0-5]|[68][0-9])[0-9]{11}|3[47][0-9]{13})*$/ |
簡易Email | /^([a-zA-Z0-9._%-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4})*$/ |
簡易Email 2 | /^\w+((-\w+)|(.\w+))\@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z]+$/ |
Google mail | /^.*@gmail.com$/ |
IP位址 | /^((?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?))*$/ |
密碼 ( 密碼長度必須有八碼,並且包含至少一個小寫字母與一個大寫字母和一個數字 ) | /^(?=^.{8,}$)((?=.*[A-Za-z0-9])(?=.*[A-Z])(?=.*[a-z]))^.*$/ |
網址 | /^(((http|https|ftp):\/\/)?([[a-zA-Z0-9]\-\.])+(\.)([[a-zA-Z0-9]]){2,4}([[a-zA-Z0-9]\/+=%&_\.~?\-]*))*$/ |

從平面設計漸漸轉職到前端網頁,日常就是追劇、看綜藝大笑來撫平身心。
『沒事多學習,多學習好事。』來鼓勵躺平的自己。
喜歡我的文章請幫我按讚哦!信箱:doublinlin@gmail.com