jQuery遠程驗證規則：高效的AJAX表單驗證
核心要點
使用“remote”方法進行驗證 (新方法)
如你所見，要傳遞數據，只需使用鍵值對語法，如下所示，發送的數據為“&emails=email@jquery4u.com”。後端腳本的返回值是JSON編碼的true（驗證通過）或HTML消息（驗證失敗）。
// 验证用户邮箱
$(':input[name="uAcc"]').rules("add", {
"remote": {
url: 'validateEmail.php',
type: "post",
data: {
emails: function() {
return $('#register-form :input[name="email"]').val();
}
}
}
});使用自定義方法進行驗證 (舊方法)
// 验证用户邮箱
$.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 });後端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变量
}
?>另一個示例
/* 注册脚本 */
(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);默認情況下，驗證插件會在每次按鍵時發送一個遠程規則的AJAX請求，導致發送過多的AJAX請求來驗證字段。一種禁用此方法的方法是停用onkeyup驗證，以便只有在您完成輸入後才通過AJAX驗證遠程規則。
$("#register-form").validate({
onkeyup: false // 输入时关闭自动验证
});對jQuery AJAX驗證遠程規則的常見問題解答 (FAQ)
（此處省略了FAQ部分，因為篇幅過長，且內容與已有的答案高度重複。如果需要，可以單獨提出FAQ問題。）
以上是jQuery Ajax驗證使用遠程規則的詳細內容。更多資訊請關注PHP中文網其他相關文章！
