【JavaScript】メールアドレスをチェックする方法

入力されたメールアドレスが正しい形式かをチェックする方法を解説します。手段は大きく3つ、①HTML標準の input type="email"、②JavaScriptの正規表現、③サーバー側での確認メールです。

最初に押さえておきたいのは、「形式が正しい」と「実在して受信できる」は別という点です。フロント側でできるのは形式チェックまで。確実な検証は確認メールが必要です。この記事では各手段を適材適所で使う方法を紹介します。

まず input type=”email” を使う（HTML標準）

もっとも手軽で確実なのは、入力欄を type="email" にすることです。ブラウザ標準の検証が効き、スマホでは入力に最適なキーボードが表示されます。検証結果はJavaScriptの制約検証APIで取得できます。

<form id="form">
  <input type="email" id="email" required>
  <button type="submit">送信</button>
</form>

const form = document.getElementById("form");
const input = document.getElementById("email");

form.addEventListener("submit", (event) => {
  if (!input.checkValidity()) {       // 形式が不正なら
    event.preventDefault();
    input.reportValidity();           // ブラウザ標準のエラーを表示
  }
});

エラーメッセージを自分で出したいときは setCustomValidity() を使います。問題が無くなったら空文字でクリアするのを忘れないでください。

input.addEventListener("input", () => {
  if (input.validity.typeMismatch) {
    input.setCustomValidity("メールアドレスの形式で入力してください");
  } else {
    input.setCustomValidity(""); // OKならクリア（必須）
  }
});

JavaScriptの正規表現で判定する

独自の条件で判定したいときは正規表現を使います。実用的でよく使われるのが次のパターンです。判定前に trim() で前後の空白を除去するのがポイントです。

function isEmailFormat(str) {
  const email = str.trim(); // 前後の空白を除去
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

isEmailFormat("test@example.com");  // true
isEmailFormat("a@b.c");             // true
isEmailFormat("a@b");               // false（ドットがない）
isEmailFormat(" test@example.com"); // true（trimで前後空白を除去）

この正規表現は 「@の前後に文字があり、ドメインにドットを含む」という基本形をチェックします。各部分の意味は次のとおりです。

• ^ … $ … 文字列全体（先頭から末尾まで）を対象にする
• [^\s@]+ … 空白と @ 以外が1文字以上（@の前のローカル部）
• @ … @ をちょうど1つ
• [^\s@]+\.[^\s@]+ … ドメイン部。\. でドットを必須にする

type=”email” と正規表現の使い分け

注意したいのは、type="email" の標準検証はやや緩い点です。たとえば a@b（ドメインにドットが無い）も有効と判定されます。ドットを必須にしたいなど条件を足したい場合は、type="email" に加えて上の正規表現で補うとよいでしょう。

正規表現で厳密にしすぎない

メールアドレスの仕様（RFC）は非常に複雑で、形式を完全に検証する正規表現は現実的ではありません。厳しくしすぎると、かえって有効なアドレスを弾いてしまいます。

確実な検証は確認メール（サーバー側）

フロント側の検証はあくまで形式チェックで、「そのアドレスが実在して受信できるか」までは分かりません。またクライアントの検証は簡単に迂回できるため、サーバー側でも必ず検証します。

実在を確かめる確実な方法は、確認メール（確認リンク）を送ることです。これにより、入力ミスや使い捨て・存在しないアドレスを実運用で排除できます。フォームの送信制御はEnterキーでフォーム送信を無効化する方法、入力のリアルタイム監視はフォーム入力をリアルタイムで監視する方法も参考になります。

実装例：フォームで形式を検証する

ここまでをまとめた実装例です。type="email" に正規表現を併用し、送信時に判定して結果を表示します。

<form id="form">
  <input type="email" id="email" required>
  <button type="submit">送信</button>
</form>
<p id="result"></p>

const form = document.getElementById("form");
const input = document.getElementById("email");
const result = document.getElementById("result");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const email = input.value.trim();
  const ok = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);

  result.textContent = ok ? "有効な形式です" : "メールアドレスの形式が正しくありません";
  result.style.color = ok ? "green" : "red";
});

HTML5の入力タイプ全般の使い方はinput type=”tel”の使い方も参考になります。

よくある質問（FAQ）

まとめ

メールアドレスのチェックは、①input type="email" で標準検証 → ②必要なら正規表現で条件を追加 → ③サーバー側＋確認メールで実在確認、の3段構えが堅実です。

正規表現は /^[^\s@]+@[^\s@]+\.[^\s@]+$/ 程度で十分で、trim() を忘れずに。完全な検証を正規表現に求めず、最終的な実在確認は確認メールに任せるのが、使いやすく確実なフォームのつくり方です。