jQuery ajax検証リモートルールを使用します

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

コアポイント

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

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

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

// 验证用户邮箱
$(':input[name="uAcc"]').rules("add", {
  "remote": {
      url: 'validateEmail.php',
      type: "post",
      data: {
          emails: function() {
              return $('#register-form :input[name="email"]').val();
          }
      }
  }
});

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

// 验证用户邮箱
$.validator.addMethod("validateUserEmail", function(value, element) {
    var inputElem = $('#register-form :input[name="email"]'),
        data = { "emails": inputElem.val() },
        eReport = ''; // 错误报告

    $.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加载错误... ... ' + url + query);
            return false;
        }
    });

}, '');

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

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

<?php
/* 检查邮箱是否已注册 */

// 使用mysqli连接数据库

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() {

         // 表单验证规则
         $("#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要求を送信し、フィールドを確認するために過剰なAJAX要求が送信されます。この方法を無効にする1つの方法は、oneyup検証を無効にすることで、タイピングが終了した後にのみAjaxを使用してリモートルールが検証されるようにすることです。

$("#register-form").validate({
   onkeyup: false // 输入时关闭自动验证
});

JQuery ajax検証リモートルール

のためのFAQ（FAQ）

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

以上がjQuery ajax検証リモートルールを使用しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。