参考資料：RFC 5322、email-validator、js-email-validation

2024-04-04

JavaScriptでメールアドレスを検証するには、いくつかの方法があります。

正規表現：最も一般的な方法です。メールアドレスの形式に合致するかどうかをチェックします。
HTML5のinput type="email"属性: HTML5で導入された属性です。ブラウザが自動的に検証を行います。
ライブラリ: メールアドレス検証に特化したライブラリを使用する方法です。

正規表現による検証

正規表現は、文字列のパターンを抽出・置換するためのツールです。メールアドレスの形式は、RFC 5322で定義されています。

^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)\.([a-zA-Z]{2,5})$

上記の正規表現は、以下の条件を満たすメールアドレスを検証します。

最初の部分 (^) は、文字列の始まりを表します。
[a-zA-Z0-9_\-\.]+ は、英数字、アンダーバー、ハイフン、ピリオドが1文字以上続くことを表します。
@ は、アットマークを表します。
([a-zA-Z0-9_\-]+) は、2つ目の部分と同じ条件を表します。
\. は、ピリオドを表します。
([a-zA-Z]{2,5}) は、2文字から5文字までの英字が続くことを表します。
$ は、文字列の終わりを表します。

以下のコードは、正規表現を使ってメールアドレスを検証する例です。

<input type="text" id="email">
<button onclick="validateEmail()">送信</button>

<script>
function validateEmail() {
  const email = document.getElementById('email').value;
  const regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)\.([a-zA-Z]{2,5})$/;
  if (!regex.test(email)) {
    alert('メールアドレスが正しくありません');
  }
}
</script>

HTML5のinput type="email"属性

HTML5で導入されたinput type="email"属性を使うと、ブラウザが自動的にメールアドレスの形式をチェックしてくれます。

<input type="email" id="email">

ライブラリ

メールアドレス検証に特化したライブラリを使うと、簡単に検証を行うことができます。

これらのライブラリは、正規表現による検証よりも簡単に、より多くの条件を検証することができます。

JavaScriptでメールアドレスを検証するには、いくつかの方法があります。それぞれの方法にはメリットとデメリットがあり、目的に合わせて使い分けることが重要です。

<input type="text" id="email">
<button onclick="validateEmail()">送信</button>

<script>
function validateEmail() {
  const email = document.getElementById('email').value;
  const regex = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-]+)\.([a-zA-Z]{2,5})$/;
  if (!regex.test(email)) {
    alert('メールアドレスが正しくありません');
  }
}
</script>

<input type="email" id="email">

email-validator

<input type="text" id="email">
<button onclick="validateEmail()">送信</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/email-validator.min.js"></script>

<script>
function validateEmail() {
  const email = document.getElementById('email').value;
  if (!emailValidator.validate(email)) {
    alert('メールアドレスが正しくありません');
  }
}
</script>

<input type="text" id="email">
<button onclick="validateEmail()">送信</button>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js-email-validation.min.js"></script>

<script>
function validateEmail() {
  const email = document.getElementById('email').value;
  if (!isValidEmail(email)) {
    alert('メールアドレスが正しくありません');
  }
}
</script>