LoginSignup
3
5

More than 1 year has passed since last update.

【JavaScript】メールアドレスとパスワードでよくある正規表現を理解する

Last updated at Posted at 2021-11-07

はじめに

こんにちは。
こちらの記事では、メールアドレスとパスワードでよくある正規表現を理解する方法を記しています。
誤っている点がございましたらコメントいただけると幸いです。

正規表現とは

正規表現について簡単に説明すると、特殊文字の組み合わせにより、使用したい文字を指定することができます。よく使われる場面は、郵便番号で数字とハイフン-を指定したり、今回のようにメールアドレスとパスワードのときに用いられます。

参考記事:https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Regular_Expressions

前提

こちらの前回の記事で正規表現を用いたのですが、理解を深められるよう、下記のメールアドレスとパスワードに関して解説していきます。

//メールアドレスの正規表現
/^[A-Za-z0-9]{1}[A-Za-z0-9_.-]*@{1}[A-Za-z0-9_.-]{1,}\.[A-Za-z0-9]{1,}$/

//パスワードの正規表現
/^(?=.*?[a-z])(?=.*?\d)[a-z\d]{8,20}$/i;

検索すれば正規表現の記事はたくさん出てきますが、今回使用するもののみ紹介したいと思います。

特殊文字 文字の簡単な説明
^ 先頭の文字と一致
$ 末尾の文字と一致
{1} 直前の文字を1回一致
{1,} 直前の文字を1回以上一致
{8,20} 直前の文字を8回〜20回一致
[A-Za-z0-9] 大英字または小英字または数字のいずれかと一致
[_.-] アンダースコアまたはドットまたはハイフンのいずれかと一致
* 直前の文字の0回以上一致
\ 直後の特殊文字を通常文字として認識(エスケープ)
? 直前の文字0回か1回は一致
. 改行文字を除外して1文字と一致
\d 数字と一致
i 大小英字を区別しない(末尾のオプション)

参考記事:https://qiita.com/iLLviA/items/b6bf680cd2408edd050f

※追記(2021年11月8日現在)

特殊文字 文字の簡単な説明
+ 直前の文字の1回以上一致
\w 大英字または小英字または数字またはアンダースコアのいずれかと一致

解説

メールアドレス、パスワードの順に解説していきます。

メールアドレスの正規表現

ポイントとしては、かっこの中で正規表現の特殊文字を指定していると思われるかもしれませんが、角かっこ[]内だと普通の文字として認識されます。また、バックスラッシュ\で特殊文字も普通の文字として認識されます。
もちろんメールアドレスなので、アットマーク@は1文字は必ず指定します。

/^                    // 正規表現の範囲宣言。
[A-Za-z0-9]{1}        // 大小英数字のうち、1回は一致させる。
[A-Za-z0-9_.-]*       // 大小英数字または記号の中で、0回以上一致させる。
@{1}                  // @を1回は一致させる。
[A-Za-z0-9_.-]{1,}    // 大小英数字または記号の中で、0回以上一致させる。
\.                    // .を文字として認識。
[A-Za-z0-9]{1,}       // 大小英数字のうち、1回以上は一致させる。
$/                    // 正規表現の範囲宣言。

※追記(2021年11月8日現在)

コメントでご指摘をいただき、メールアドレスの正規表現は下記のように書き換えられるようです!
メールアドレスも、大小英字を区別する必要がないのでiオプションを末尾に追加しました!

//メールアドレスの正規表現
/^[a-z\d][\w.-]*@[\w.-]+\.[a-z\d]+$/i
  • [0-9] → \d
  • {1} → 省略
  • [A-Za-z0-9_] → \w
  • {1,}+

パスワードの正規表現

数字を表現するのに[0-9]ではなく\dを使用している。また、パスワードはセキュリティの観点から、英数字を含めて文字数範囲も指定している。

script
/^                    // 正規表現の範囲宣言。
(?=.*?[a-z])          // 小英字を1文字以上含める。
(?=.*?\d)             // 数字を1文字以上含める。
[a-z\d]               // 小英数字1文字以上含める。
{8,20}                // 8文字以上、20文字以下。
$/i                   // 正規表現の範囲宣言と大小英字を区別しない。


おわりに

ここまで正規表現について解説してみました。
自分の調べた範囲内での情報なので、よりいい方法があったら教えていただけると助かります!
以上、最後まで読んでいただきありがとうございました!
よければLGTMを押してくれると嬉しいです!

3
5
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
5