jQueryで実現！「名前」は英数字のみ、「メールアドレス」は正しく入力できるフィールド検証

2024-04-08

jQuery での正規表現フィールド検証

概要

jQuery の $.validator プラグインを使って、入力フィールドの値を検証することができます。このプラグインは、さまざまな検証方法を提供しており、その中には正規表現による検証も含まれています。

手順

ライブラリの読み込み

まず、jQuery と $.validator プラグインを読み込みます。

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

検証ルールの設定

次に、$.validator プラグインを使って、検証ルールを設定します。以下の例では、name フィールドが英数字のみで構成されているかどうかを検証しています。

<script>
$(document).ready(function() {
  $("#my-form").validate({
    rules: {
      name: {
        required: true,
        regex: /^[a-zA-Z0-9]+$/
      }
    },
    messages: {
      name: {
        required: "名前を入力してください",
        regex: "英数字のみで入力してください"
      }
    }
  });
});
</script>

上記のコードでは、以下の設定を行っています。

rules オプションで、検証ルールを指定します。
name フィールドに対して、以下のルールを設定しています。
- required: 必須項目であることを指定します。
- regex: 正規表現 ^[a-zA-Z0-9]+$ に一致する必要があることを指定します。
messages オプションで、検証エラー時のメッセージを指定します。

検証の実行

フォーム送信時に、$.validator プラグインによって検証が実行されます。

<form id="my-form">
  <input type="text" name="name">
  <button type="submit">送信</button>
</form>

上記のコードでは、name フィールドに入力された値が英数字のみで構成されているかどうかが検証されます。

$.validator プラグインは、さまざまなオプションを提供しており、さまざまな検証を行うことができます。詳細は、プラグインのドキュメントを参照してください。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Regular expression field validation in jQuery</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
</head>
<body>
  <h1>Regular expression field validation in jQuery</h1>
  <form id="my-form">
    <label for="name">名前:</label>
    <input type="text" id="name" name="name">
    <br>
    <label for="email">メールアドレス:</label>
    <input type="email" id="email" name="email">
    <br>
    <button type="submit">送信</button>
  </form>

  <script>
  $(document).ready(function() {
    $("#my-form").validate({
      rules: {
        name: {
          required: true,
          regex: /^[a-zA-Z0-9]+$/
        },
        email: {
          required: true,
          email: true
        }
      },
      messages: {
        name: {
          required: "名前を入力してください",
          regex: "英数字のみで入力してください"
        },
        email: {
          required: "メールアドレスを入力してください",
          email: "正しいメールアドレスを入力してください"
        }
      }
    });
  });
  </script>
</body>
</html>

name フィールド:
- 必須項目であること
- 英数字のみで構成されていること
email フィールド:
- 正しいメールアドレスであること

このコードを参考に、さまざまな入力フィールドの検証を行うことができます。

jQuery 以外での正規表現フィールド検証

JavaScript の RegExp.test() メソッドを使って、入力された値が正規表現に一致するかどうかを検証することができます。

<script>
function validateName(name) {
  const regex = /^[a-zA-Z0-9]+$/;
  return regex.test(name);
}

function validateEmail(email) {
  const regex = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return regex.test(email);
}

$(document).ready(function() {
  $("#name").on("blur", function() {
    const name = $(this).val();
    if (!validateName(name)) {
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });

  $("#email").on("blur", function() {
    const email = $(this).val();
    if (!validateEmail(email)) {
      $(this).addClass("error");
    } else {
      $(this).removeClass("error");
    }
  });
});
</script>

上記のコードでは、以下の関数を使って、name フィールドと email フィールドの値を検証しています。

validateName(name): name フィールドが英数字のみで構成されているかどうかを検証します。
validateEmail(email): email フィールドが正しいメールアドレスであるかどうかを検証します。

HTML5 の pattern 属性を使って、入力フィールドの値を正規表現で検証することができます。

<form>
  <label for="name">名前:</label>
  <input type="text" id="name" name="name" pattern="^[a-zA-Z0-9]+$">
  <br>
  <label for="email">メールアドレス:</label>
  <input type="email" id="email" name="email" pattern="^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$">
  <br>
  <button type="submit">送信</button>
</form>