More than 3 years have passed since last update.

JavaScriptのメールアドレスのバリデーションサンプル

Posted at 2021-01-12

#やること
入力されたメールアドレスの形式をチェックし、NGならアラートを表示してフォームは送信しない

<form name="form">
  <input id="email" type="email">
  <input id="submit" type="submit">
</form>

##ステップ1
入力されたメールアドレスの値を取得する。

const email = document.form.email.value;

const email = document.getElementById('email').value;

どちらでも取得可能です。今の書き方だと後者ですね。

##ステップ2
「メールアドレスの形式」とみなす条件を決定する。

例えば、

「任意の文字1文字以上」「@」「任意の文字1文字以上」「.」「任意の文字1文字以上」
をメールアドレスの形式とみなすのであれば、正規表現にすると

と変換し、つなげると

.+@.+\..+

となります。

「半角英数1文字以上」「半角英数または.-のいずれか0文字以上」「@」「半角英数または-のいずれか1文字以上」「半角英数または._-のいずれか1文字以上」
をメールアドレスの形式とみなすのであれば、正規表現にすると

と変換し、つなげると

[a-zA-Z0-9]+[a-zA-Z0-9\._-]*@[a-zA-Z0-9_-]+[a-zA-Z0-9\._-]+

となります。

どこまで厳しいバリデーションにするかを考え、まずは日本語で整理してみましょう。
その後正規表現の書き方に変換します。

##ステップ3
入力されたメールアドレスと「メールアドレスの形式」とみなす条件を比較する。

入力されたメールアドレス = email
「メールアドレスの形式」とみなす条件 = .+@.+\..+
です。
比較にはmatchを使います。

const email = document.getElementById('email').value;
if (!email.match(/.+@.+\..+/)) {
  window.alert('メールアドレスをご確認ください'); 
}

これで、入力されたメールアドレスがメールアドレスの形式でない場合はアラートが出るようになります。

##今回やらないこと
ハイフンを置換する。

const email = document.getElementById('email').value.replace(/[━.*‐.*―.*－.*\-.*ー.*\-]/gi, '');

取得したメールアドレスの値に対して、置換をかけています。
replaceのかっこ内の１つ目の引数は変更前の「ハイフンらしきもの」、２つ目の引数は変更後の空欄です。
「ハイフンらしきものを空欄に置換する」という書き方になります。

なぜやらないかというと、ハイフンを空欄に変換してから比較すると、変換前の入力が正しかったのかわからなくなるためです。例えば、

0-8-0-1-2-3-4-5-6-7-8

のような入力も通ってしまいますよね。

そのため、入力を置換するのではなく、入力された値のまま「メールアドレスの形式」とみなす条件、「電話番号の形式」とみなす条件と比較するべきです。