はじめに
Next.js + rails アプリでフロント側にパスワードのバリデーションを実装しようと思い、
どうやってやるのかなーと調べていました。
使える正規表現自体は見つかったのですが、表現の内容を理解するためにMDNのページを行ったり来たりして大変だったので
今回使った特殊文字をまとめておきます。
プラスちょっとだけ構造を説明します。
想定している読者
- 初心者
- Javascriptでパスワードのバリデーションを実装したい方
- 見つけた正規表現を理解せずコピペで使うのは嫌な方
今回使う正規表現
/^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
- 数字とアルファベットを最低1文字ずつ含む
- 6文字以上20文字以下
の文字列にマッチします。
こちらの記事を参考にしました。
言語別：パスワード向けの正規表現
3つに分けたほうが理解しやすいと思ったので、分けて書きます。
Part1
/^(?=.*[a-zA-Z])(?=.*\d)/
| 特殊表現 | 意味 |
|---|---|
| ^ | 文頭にマッチ |
| (?=hoge) | 直前の表現にhogeが続く場合のみマッチするようになる |
| . | 任意の1文字にマッチ |
| * | 直前の表現の0回以上の繰り返し |
| [a-zA-Z] | 大/小文字アルファベット1文字にマッチ |
| \d | アラビア数字1文字にマッチ |
Part1は文頭^に対して2つの(?=hoge)がかかっています。
ここでは
「任意の文字の0回以上の繰り返し+何かしらのアルファベット1文字」が後ろに続き(?=.*[a-zA-Z])、
かつ
「任意の文字の0回以上の繰り返し+何かしらの数字1文字」が後ろに続く(?=.*\d)
「文頭」にマッチします。
つまり数字とアルファベットを含む文の文頭にマッチします。
Part2
/.{6,20}/
| 特殊表現 | 意味 |
|---|---|
| . | 任意の1文字にマッチ |
| {x,y} | 直前の表現のx回以上y回以下の繰り返し |
Part2は
任意の文字の6回以上20回以下の繰り返し
にマッチします。
つまり6文字以上20文字以下の文字列にマッチします。
Part3
/$/
| 特殊表現 | 意味 |
|---|---|
| $ | 入力の末尾にマッチ |
Part3は入力の末尾にマッチします。それだけです。
まとめて
/^(?=.*[a-zA-Z])(?=.*\d).{6,20}$/
//最初と一緒です
「数字とアルファベットを含む文の文頭」+「6文字以上20文字以下の文字列」+「入力末尾」
つまり
数字とアルファベットを含む6文字以上20文字以下の文字列にマッチする正規表現ができました!