jQueryリモート検証ルール：効率的なajaxフォーム検証

コアポイント

• jQuery検証プラグインは、Ajaxコールを含むカスタムルールを記述せずに検証プロセス中にAJAX要求を行うことを可能にする「リモート」と呼ばれるルールを提供します。
• 「リモート」ルールは、ユーザー名または電子メールが登録されているかどうかを確認(rèn)するなど、サーバーデータに基づいてフィールドの検証に特に適用できます。フィールド値をサーバーに含むAJAXリクエストを送信し、サーバーが応答して値が有効かどうかを判斷するのを待ちます。
• 「リモート」ルールは一度に1つのフィールドのみを検証しますが、フィールド値が変更されてフォーカスを失うたびにAJAX要求を送信するため、動的データまたは変化するフィールドを処理できます。ただし、フィールド値が頻繁に変更された場合、これが多數(shù)のAJAX要求につながる可能性があることに注意することが重要です。

「リモート」メソッド（新しい方法）を使用して検証します

ご覧のとおり、データを渡すには、以下に示すように、キー値ペアの構(gòu)文を使用するだけで、送信されたデータは「＆emails=email@jquery4u.com」です。バックエンドスクリプトの戻り値は、JSONエンコードTrue（bedified sull）またはHTMLメッセージ（検証された失敗）です。

// 驗(yàn)證用戶郵箱
$(':input[name="uAcc"]').rules("add", {
  "remote": {
      url: 'validateEmail.php',
      type: "post",
      data: {
          emails: function() {
              return $('#register-form :input[name="email"]').val();
          }
      }
  }
});

カスタムメソッド（古い方法）を使用して検証します

// 驗(yàn)證用戶郵箱
$.validator.addMethod("validateUserEmail", function(value, element) {
    var inputElem = $('#register-form :input[name="email"]'),
        data = { "emails": inputElem.val() },
        eReport = ''; // 錯(cuò)誤報(bào)告

    $.ajax({
        type: "POST",
        url: 'validateEmail.php',
        dataType: "json",
        data: data,
        success: function(data) {
            if (data !== 'true') {
              return '此郵箱地址已注冊。';
            } else {
               return true;
            }
        },
        error: function(xhr, textStatus, errorThrown) {
            alert('AJAX加載錯(cuò)誤... ... ' + url + query);
            return false;
        }
    });

}, '');

$(':input[name="email"]').rules("add", { "validateUserEmail": true });

バックエンドPHPスクリプト

<?php
/* 檢查郵箱是否已注冊 */

// 使用mysqli連接數(shù)據(jù)庫

if (!empty($_POST['email'])) {
    $email = $mysqli->real_escape_string($_POST['email']);
    $query = "SELECT ID FROM users WHERE user_email = '{$email}' LIMIT 1;";
    $results = $mysqli->query($query);
    if ($results->num_rows == 0) {
        echo "true";  // 可以注冊
    } else {
        echo "false"; // 已注冊
    }
} else {
    echo "false"; // 無效的POST變量
}

?>

別の例

/* 注冊腳本 */

(function($, W, D, undefined) {
    $(D).ready(function() {

         // 表單驗(yàn)證規(guī)則
         $("#register-form").validate({
             rules: {
                email: {
                    required: true,
                    email: true,
                    "remote": {
                      url: 'validateEmail.php',
                      type: "post",
                      data: {
                          email: function() {
                              return $('#register-form :input[name="email"]').val();
                          }
                      }
                    }
                },
                name: {
                    required: true,
                    minlength: 3
                },
                password: {
                    required: true,
                    minlength: 8
                },
                password_repeat: {
                    required: true,
                    equalTo: "#password", // 修正equalTo的用法
                    minlength: 8
                }
             },
             messages: {
                 email: {
                    required: "請輸入您的郵箱地址。",
                    email: "請輸入有效的郵箱地址。",
                    remote: jQuery.validator.format("{0}已被占用。")
                 },
                 name: "請輸入您的姓名。",
                 password: "請輸入密碼。",
                 password_repeat: "兩次密碼必須一致。"
             },
             submitHandler: function(form) {
                form.submit();
             }
         });

    });

})(jQuery, window, document);

リモート検証が入力でトリガーされるのを防ぎます

デフォルトでは、検証プラグインは、キーが押されるたびにリモートルールajax要求を送信し、フィールドを確認(rèn)するために過剰なAJAX要求が送信されます。この方法を無効にする1つの方法は、oneyup検証を無効にすることで、タイピングが終了した後にのみAjaxを使用してリモートルールが検証されるようにすることです。

$("#register-form").validate({
   onkeyup: false // 輸入時(shí)關(guān)閉自動驗(yàn)證
});

JQuery ajax検証リモートルール

のためのFAQ（FAQ）

（記事が長すぎてコンテンツが既存の回答と高度に複製されているため、FAQパーツはここでは省略されています。必要に応じて、FAQの質(zhì)問を個(gè)別に尋ねることができます。）

以上がjQuery ajax検証リモートルールを使用しますの詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。