jQuery Ajax Validation Use the Remote Rule

jQuery Remote Verification Rules: Efficient AJAX Form Verification

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).

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

Verify with custom methods (old method)

<code class="language-javascript">// 验证用户邮箱
$.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 });</code>

Backend PHP script

<code class="language-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变量
}

?></code>

Another example

<code class="language-javascript">/* 注册脚本 */

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

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.

<code class="language-javascript">$("#register-form").validate({
   onkeyup: false // 输入时关闭自动验证
});</code>

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!