jQuery Validateを使って入力値をバリデーションチェックする方法

2024-04-08

jQuery Validate: 正規表現検証ルールを追加する方法

jQuery Validate プラグインは、フォーム入力の検証を簡単に実現する強力なツールです。標準で用意されているルールに加えて、正規表現を用いた独自のルールを追加することで、より複雑な検証を行うことができます。

手順

必要なライブラリの読み込み

以下のライブラリが必要です。

jQuery
jQuery Validate プラグイン

正規表現ルールの定義

$.validator.addMethod メソッドを使用して、正規表現ルールを定義します。

$.validator.addMethod("myRule", function(value, element) {
  // 正規表現
  var regex = /パターン/;
  // テスト
  return regex.test(value);
}, "エラーメッセージ");

ルールの適用

rules オプションを使用して、入力要素にルールを適用します。

$("#myInput").rules("add", {
  required: true,
  myRule: true
});

エラーメッセージの表示

messages オプションを使用して、エラーメッセージを定義します。

$("#myInput").rules("add", {
  required: true,
  myRule: {
    required: "必須項目です",
    myRule: "フォーマットが正しくありません"
  }
});

<input type="text" id="myInput" name="myInput">

<script>
$(function() {
  // 正規表現ルールの定義
  $.validator.addMethod("myRule", function(value, element) {
    // 正規表現
    var regex = /^[a-zA-Z0-9]+$/;
    // テスト
    return regex.test(value);
  }, "英数字のみ入力可能です");

  // ルールの適用
  $("#myInput").rules("add", {
    required: true,
    myRule: true
  });

  // フォーム送信時の処理
  $("#myForm").submit(function(e) {
    // バリデーションチェック
    if (!$("#myForm").valid()) {
      e.preventDefault();
    }
  });
});
</script>

補足

上記は基本的な例です。より複雑な検証を行う場合は、$.validator.addMethod メソッドの詳細オプションを参照してください。
日本語の情報は少ないですが、上記の参考資料などを参考に、日本語で解説しているサイトもいくつかありますので、探してみると良いでしょう。

HTML

<form id="myForm">
  <input type="text" id="myInput" name="myInput">
  <button type="submit">送信</button>
</form>

JavaScript

$(function() {
  // 正規表現ルールの定義
  $.validator.addMethod("myRule", function(value, element) {
    // 正規表現
    var regex = /^[a-zA-Z0-9]+$/;
    // テスト
    return regex.test(value);
  }, "英数字のみ入力可能です");

  // ルールの適用
  $("#myInput").rules("add", {
    required: true,
    myRule: true
  });

  // フォーム送信時の処理
  $("#myForm").submit(function(e) {
    // バリデーションチェック
    if (!$("#myForm").valid()) {
      e.preventDefault();
    }
  });
});

動作

上記のコードを HTML ファイルに保存し、ブラウザで開きます。
myInput 入力欄に英数字以外の文字を入力し、「送信」ボタンをクリックします。
エラーメッセージが表示され、送信が阻止されます。

応用

上記のサンプルコードを参考に、さまざまな正規表現ルールを追加することができます。

メールアドレスの検証
電話番号の検証
日付の検証
など

jQuery Validate で正規表現検証を行うその他の方法

$.validator.methods.pattern メソッドは、正規表現に基づいて入力値を検証するメソッドです。以下のコードのように、pattern オプションを使用して正規表現を指定できます。

$("#myInput").rules("add", {
  required: true,
  pattern: /^[a-zA-Z0-9]+$/,
  messages: {
    pattern: "英数字のみ入力可能です"
  }
});

data-rule 属性を使用して、入力要素に直接正規表現を指定できます。以下のコードのように、data-rule 属性に正規表現を記述します。

<input type="text" id="myInput" name="myInput" data-rule="^[a-zA-Z0-9]+$">

上記の方法でニーズに合わない場合は、$.validator.addMethod メソッドを使用して独自の検証方法を作成できます。以下のサンプルコードは、入力された値が半角英数字のみであることを検証する例です。

$.validator.addMethod("hankakuEisu", function(value, element) {
  // 半角英数字の正規表現
  var regex = /^[a-zA-Z0-9]+$/;
  // テスト
  return regex.test(value);
}, "半角英数字のみ入力可能です");

$("#myInput").rules("add", {
  required: true,
  hankakuEisu: true
});