Validation JQuery Ajax Utilisez la règle distante

JQuery Règles de vérification à distance: Vérification efficace du formulaire AJAX

Points de base

• Le plugin de validation jQuery fournit une règle appelée "distant" qui permet de faire des demandes AJAX pendant le processus de vérification sans écrire de règles personnalisées contenant des appels AJAX, ce qui permet de gagner du temps.
• La règle "distante" est particulièrement applicable à la validation des champs en fonction des données du serveur, telles que la vérification si un nom d'utilisateur ou un e-mail est enregistré. Il envoie une demande AJAX contenant la valeur de champ au serveur et attend que le serveur réponde pour déterminer si la valeur est valide.
• Bien que la règle "distante" valide un seul champ à la fois, il peut gérer les données dynamiques ou modifier les champs car il envoie une demande Ajax chaque fois que la valeur du champ change et perd la mise au point. Cependant, il est important de noter que si les valeurs de champ changent fréquemment, cela peut conduire à un grand nombre de demandes AJAX.

Vérifiez à l'aide de la méthode "Remote" (nouvelle méthode)

Comme vous pouvez le voir, pour passer des données, utilisez simplement la syntaxe de paire de valeurs clés, comme indiqué ci-dessous, les données envoyées sont "&emails=email@jquery4u.com". La valeur de retour du script backend est codée JSON True (vérifiée via) ou le message HTML (vérifié échoué).

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

Vérifiez avec des méthodes personnalisées (ancienne méthode)

// 验证用户邮箱
$.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 });

Script php backend

<?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变量
}

?>

un autre exemple

/* 注册脚本 */

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

Empêcher la vérification à distance d'être déclenchée sur l'entrée

Par défaut, le plugin de vérification envoie une demande Ajax réglée à distance chaque fois que la touche est enfoncée, ce qui entraîne des demandes AJAX excessives envoyées pour vérifier le champ. Une façon de désactiver cette méthode consiste à désactiver la vérification sur lakeup afin que les règles distantes soient validées via Ajax uniquement après avoir terminé la saisie.

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

FAQ (FAQ) pour jQuery Ajax Vérification Règles distantes

(La partie FAQ est omise ici car l'article est trop long et le contenu est très dupliqué avec les réponses existantes. Si nécessaire, vous pouvez poser la question de la FAQ séparément.)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!