jQuery Ajax Validation Use the Remote Rule-JS Tutorial-php.cn

jQuery Ajax Validation Use the Remote Rule

尊渡假赌尊渡假赌尊渡假赌

Release： 2025-02-26 08:59:08

Original

908 people have browsed it

jQuery Remote Verification Rules: Efficient AJAX Form Verification

jQuery Ajax Validation Use the Remote Rule

Core points

jQuery validation plugin provides a rule called "remote" that allows AJAX requests to be made during the verification process without writing custom rules containing AJAX calls, saving time.
The "remote" rule is especially applicable to validating fields based on server data, such as checking whether a username or email is registered. It sends an AJAX request containing the field value to the server and waits for the server to respond to determine whether the value is valid.
Although the "remote" rule only validates one field at a time, it can handle dynamic data or changing fields because it sends an AJAX request every time the field value changes and loses focus. However, it is important to note that if the field values change frequently, this can lead to a large number of AJAX requests.

Verify using the "remote" method (new method)

As you can see, to pass data, just use the key-value pair syntax, as shown below, the sent data is "&emails=email@jquery4u.com". The return value of the backend script is JSON-encoded true (verified through) or HTML message (verified failed).

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

Copy after login

Verify with custom methods (old method)

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

Copy after login

Backend PHP script

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

?>

Copy after login

Another example

/* 注册脚本 */

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

Copy after login

Prevent remote verification from being triggered on input

By default, the verification plugin sends a remote ruled AJAX request every time the key is pressed, resulting in excessive AJAX requests being sent to verify the field. One way to disable this method is to disable onkeyup verification so that remote rules are validated through AJAX only after you have finished typing.

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

Copy after login

FAQ (FAQ) for jQuery AJAX Verification Remote Rules

(The FAQ part is omitted here because the article is too long and the content is highly duplicated with the existing answers. If necessary, you can ask the FAQ question separately.)

The above is the detailed content of jQuery Ajax Validation Use the Remote Rule. For more information, please follow other related articles on the PHP Chinese website!