ブラウザの力で検証！HTML5のemail属性を使ったメールアドレス検証

2024-04-11

jQueryでメールアドレスの検証を行う方法

jQueryを使用して、フォームに入力されたメールアドレスが正しい形式かどうかを検証する方法について説明します。

必要なもの

jQueryライブラリ
JavaScriptの知識

手順

HTMLコード

以下のHTMLコードを用意します。

<input type="email" id="email" name="email" placeholder="メールアドレス">
<button type="submit">送信</button>

以下のJavaScriptコードを用意します。

$(document).ready(function() {
  $("#email").on("blur", function() {
    var email = $(this).val();
    var pattern = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    if (!pattern.test(email)) {
      $(this).addClass("error");
      alert("メールアドレスが正しくありません。");
    } else {
      $(this).removeClass("error");
    }
  });
});

解説

$(document).ready(function() { ... }); は、DOMContentLoadedイベントが発生した時に実行される処理です。
$("#email").on("blur", function() { ... }); は、#email要素のフォーカスが外れた時に実行される処理です。
var email = $(this).val(); は、#email要素の値を取得します。
var pattern = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/; は、メールアドレスの正規表現です。
if (!pattern.test(email)) { ... } else { ... } は、正規表現にマッチするかどうかで処理を分岐します。
$(this).addClass("error"); は、#email要素にerrorクラスを追加します。
alert("メールアドレスが正しくありません。"); は、アラートメッセージを表示します。

補足

上記のコードは基本的な例です。必要に応じて、エラーメッセージの内容や処理を変更することができます。
より詳細な検証を行う場合は、jQuery Validationなどのライブラリを使用することができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>メールアドレスの検証</title>
</head>
<body>
  <h1>メールアドレスの検証</h1>
  <form action="#">
    <input type="email" id="email" name="email" placeholder="メールアドレス">
    <button type="submit">送信</button>
  </form>

  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function() {
    $("#email").on("blur", function() {
      var email = $(this).val();
      var pattern = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
      if (!pattern.test(email)) {
        $(this).addClass("error");
        alert("メールアドレスが正しくありません。");
      } else {
        $(this).removeClass("error");
      }
    });
  });
  </script>
</body>
</html>

$(document).ready(function() {
  $("#email").on("blur", function() {
    var email = $(this).val();
    var pattern = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
    if (!pattern.test(email)) {
      $(this).addClass("error");
      alert("メールアドレスが正しくありません。");
    } else {
      $(this).removeClass("error");
    }
  });
});

動作

上記のコードをHTMLファイルに保存します。
ブラウザでHTMLファイルを開きます。
#email要素にメールアドレスを入力します。

結果

入力されたメールアドレスが正しい形式の場合、何も起こりません。
入力されたメールアドレスが正しくない形式の場合、#email要素にerrorクラスが追加され、アラートメッセージが表示されます。

jQueryでメールアドレスを検証する他の方法

jQuery Validationプラグインは、フォームの入力値を検証するためのプラグインです。メールアドレスの検証機能も備えています。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation/1.19.3/jquery.validate.min.js"></script>

<script>
$(document).ready(function() {
  $("#email").validate({
    rules: {
      email: {
        required: true,
        email: true
      }
    }
  });
});
</script>

JavaScriptのemail属性を使用する

HTML5では、<input>要素のtype属性にemailを指定することで、メールアドレス入力欄を作成できます。この属性を指定すると、ブラウザが自動的にメールアドレスの形式をチェックしてくれます。

<input type="email" id="email" name="email" placeholder="メールアドレス">

メールアドレスの正規表現を使用する

メールアドレスの形式は、正規表現で定義することができます。

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

var email = $("#email").val();

if (!pattern.test(email)) {
  alert("メールアドレスが正しくありません。");
}

サーバー側で検証を行う

上記の方法は、クライアント側の検証方法です。よりセキュリティの高い検証を行うためには、サーバー側で検証を行う必要があります。

jquery validation email