JQuery AJAX -Validierung Verwenden Sie die Remote -Regel

jQuery Remote -Überprüfung Regeln: Effiziente AJAX -Form -Überprüfung

Kernpunkte

• JQuery Validation Plugin bietet eine Regel mit dem Namen "Remote", mit der AJAX -Anfragen während des Überprüfungsprozesses erstellt werden können, ohne benutzerdefinierte Regeln zu schreiben, die AJAX -Anrufe enthalten und Zeit sparen.
• Die "Remote" -Regel gilt insbesondere für die Validierung von Feldern basierend auf Serverdaten, z. B. überprüft, ob ein Benutzername oder eine E -Mail registriert ist. Es sendet eine AJAX -Anforderung, die den Feldwert an den Server enthält, und wartet darauf, dass der Server antwortet, um festzustellen, ob der Wert gültig ist.
• Obwohl die "Remote" -Regel jeweils nur ein Feld bestätigt, kann es dynamische Daten oder Ändern von Feldern verarbeiten, da sie jedes Mal eine AJAX -Anforderung sendet, wenn sich der Feldwert ändert und den Fokus verliert. Es ist jedoch wichtig zu beachten, dass sich dies, wenn sich die Feldwerte häufig ändern, dies zu einer großen Anzahl von AJAX -Anforderungen führen kann.

Überprüfen Sie die "Remote" -Methode (neue Methode)

Wie Sie sehen können, verwenden Sie, um Daten zu übergeben. Der Rückgabewert des Backend-Skripts ist JSON-codiert (verifiziert) oder HTML-Nachricht (verifiziert fehlgeschlagen).

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

verifizieren Sie mit benutzerdefinierten Methoden (alte Methode)

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

Backend PHP -Skript

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

?>

Ein weiteres Beispiel

/* 注册脚本 */

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

verhindern, dass die Fernüberprüfung auf Eingabe ausgelöst wird

standardmäßig sendet das Bestätigungs -Plugin jedes Mal, wenn die Taste gedrückt wird, eine von der Remote regierten AJAX -Anforderung, was zu übermäßigen AJAX -Anfragen führt, um das Feld zu überprüfen. Eine Möglichkeit, diese Methode zu deaktivieren, besteht darin, die Überprüfung der ONTYUP zu deaktivieren, damit die Fernregeln erst nach dem Tippen über AJAX validiert werden.

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

FAQ (FAQ) für JQuery AJAX -Überprüfung Remote -Regeln

(Der FAQ -Teil wird hier weggelassen, da der Artikel zu lang ist und der Inhalt mit den vorhandenen Antworten stark dupliziert wird. Bei Bedarf können Sie die FAQ -Frage separat stellen.)

Das obige ist der detaillierte Inhalt vonJQuery AJAX -Validierung Verwenden Sie die Remote -Regel. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!