jQuery Ajax驗證使用遠程規則

jQuery遠程驗證規則：高效的AJAX表單驗證

核心要點

• jQuery驗證插件提供一個名為“remote”的規則，允許在驗證過程中進行AJAX請求，無需編寫包含AJAX調用的自定義規則，從而節省時間。
• “remote”規則特別適用於根據服務器數據驗證字段，例如檢查用戶名或電子郵件是否已註冊。它向服務器發送包含字段值的AJAX請求，並等待服務器響應以確定該值是否有效。
• 儘管“remote”規則一次只驗證一個字段，但它可以處理動態數據或變化的字段，因為它每次字段值更改並失去焦點時都會發送AJAX請求。但是，需要注意的是，如果字段值頻繁更改，這可能會導致大量AJAX請求。

使用“remote”方法進行驗證 (新方法)

如你所見，要傳遞數據，只需使用鍵值對語法，如下所示，發送的數據為“&emails=email@jquery4u.com”。後端腳本的返回值是JSON編碼的true（驗證通過）或HTML消息（驗證失敗）。

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

使用自定義方法進行驗證 (舊方法)

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

後端PHP腳本

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

另一個示例

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

阻止在輸入時觸發遠程驗證

默認情況下，驗證插件會在每次按鍵時發送一個遠程規則的AJAX請求，導致發送過多的AJAX請求來驗證字段。一種禁用此方法的方法是停用onkeyup驗證，以便只有在您完成輸入後才通過AJAX驗證遠程規則。

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

對jQuery AJAX驗證遠程規則的常見問題解答 (FAQ)

（此處省略了FAQ部分，因為篇幅過長，且內容與已有的答案高度重複。如果需要，可以單獨提出FAQ問題。）

以上是jQuery Ajax驗證使用遠程規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！