Rumah > hujung hadapan web > tutorial js > Pengesahan JQuery Ajax Gunakan peraturan jauh

Pengesahan JQuery Ajax Gunakan peraturan jauh

尊渡假赌尊渡假赌尊渡假赌
Lepaskan: 2025-02-26 08:59:08
asal
908 orang telah melayarinya

peraturan pengesahan jauh jQuery: Pengesahan bentuk ajax yang cekap

jQuery Ajax Validation Use the Remote Rule

mata teras

    Plugin Pengesahan JQuery menyediakan peraturan yang dipanggil "jauh" yang membolehkan permintaan Ajax dibuat semasa proses pengesahan tanpa menulis peraturan tersuai yang mengandungi panggilan AJAX, menjimatkan masa.
  • Peraturan "Jauh" terutamanya terpakai untuk mengesahkan medan berdasarkan data pelayan, seperti memeriksa sama ada nama pengguna atau e -mel didaftarkan. Ia menghantar permintaan AJAX yang mengandungi nilai medan ke pelayan dan menunggu pelayan untuk bertindak balas untuk menentukan sama ada nilai itu sah.
  • Walaupun peraturan "jauh" hanya mengesahkan satu bidang pada satu masa, ia boleh mengendalikan data dinamik atau perubahan medan kerana ia menghantar permintaan AJAX setiap kali nilai medan berubah dan kehilangan fokus. Walau bagaimanapun, adalah penting untuk diperhatikan bahawa jika nilai medan berubah dengan kerap, ini boleh membawa kepada sejumlah besar permintaan Ajax.
Sahkan menggunakan kaedah "jauh" (kaedah baru)

Seperti yang anda lihat, untuk lulus data, hanya gunakan sintaks pasangan nilai utama, seperti yang ditunjukkan di bawah, data yang dihantar adalah "&emails=email@jquery4u.com". Nilai pulangan skrip backend adalah JSON yang dikodkan benar (disahkan melalui) atau mesej HTML (disahkan gagal).

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

// 验证用户邮箱
$.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 });
Salin selepas log masuk
backend php skrip

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

?>
Salin selepas log masuk
Contoh lain

/* 注册脚本 */

(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);
Salin selepas log masuk
Cegah pengesahan jauh daripada dicetuskan pada input

Secara lalai, plugin pengesahan menghantar permintaan AJAX yang diperintah jauh setiap kali kunci ditekan, mengakibatkan permintaan AJAX yang berlebihan dihantar untuk mengesahkan medan. Salah satu cara untuk melumpuhkan kaedah ini adalah untuk melumpuhkan pengesahan OnKeyup supaya peraturan jauh disahkan melalui Ajax hanya selepas anda selesai menaip.

$("#register-form").validate({
   onkeyup: false // 输入时关闭自动验证
});
Salin selepas log masuk
FAQ (FAQ) untuk JQuery AJAX Pengesahan Peraturan Jauh

(bahagian FAQ ditinggalkan di sini kerana artikel itu terlalu panjang dan kandungannya sangat diduplikasi dengan jawapan yang ada. Jika perlu, anda boleh bertanya soalan FAQ secara berasingan.)

Atas ialah kandungan terperinci Pengesahan JQuery Ajax Gunakan peraturan jauh. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan