我是jQuery和javascript编程的新手。我有一个程序,检查用户名是否被采用。目前,PHP脚本始终返回
if(isset($_POST["username"]) )//&& isset($_POST["checking"]))
{
$xml="<register><message>Available</message></register>";
echo $xml;
}
登录功能有效,但用户名检查不起作用。有任何想法吗? 这是我的所有代码:
$(document).ready(function() {
jQuery.validator.addMethod("checkAvailability",function(value,element){
$.post( "login.php" , {username:"test", checking:"yes"}, function(xml){
if($("message", xml).text() == "Available") return true;
else return false;
});
},"Sorry, this user name is not available");
$("#loginForm").validate({
rules: {
username: {
required: true,
minlength: 4,
checkAvailability: true
},
password:{
required: true,
minlength: 5
}
},
messages: {
username:{
required: "You need to enter a username." ,
minlength: jQuery.format("Your username should be at least {0} characters long.")
}
},
highlight: function(element, errorClass) {
$(element).fadeOut("fast",function() {
$(element).fadeIn("slow");
})
},
success: function(x){
x.text("OK!")
},
submitHandler: function(form){send()}
});
function send(){
$("#message").hide("fast");
$.post( "login.php" , {username:$("#username").val(), password:$("#password").val()}, function(xml){
$("#message").html( $("message", xml).text() );
if($("message", xml).text() == "You are successfully logged in.")
{
$("#message").css({ "color": "green" });
$("#message").fadeIn("slow", function(){location.reload(true);});
}
else
{
$("#message").css({ "color": "red" });
$("#message").fadeIn("slow");
}
});
}
$("#newUser").click(function(){
return false;
});
});
答案 0 :(得分:11)
没关系,现在正在工作。这是代码:
$(document).ready(function() {
jQuery.validator.addMethod("checkAvailability",function(value,element){
var x= $.ajax({
url: "login.php",
type: 'POST',
async: false,
data: "username=" + value + "&checking=true",
}).responseText;
if($("message", x).text()=="true") return true;
else return false;
},"Sorry, this user name is not available");
$("#loginForm").validate({
rules: {
username: {
required: true,
minlength: 4,
checkAvailability: true
},
password:{
required: true,
minlength: 5
}
},
messages: {
username:{
required: "You need to enter a username." ,
minlength: jQuery.format("Your username should be at least {0} characters long.")
}
},
highlight: function(element, errorClass) {
$(element).fadeOut("fast",function() {
$(element).fadeIn("slow");
})
},
success: function(x){
x.text("OK!")
},
submitHandler: function(form){send()}
});
function send(){
$("#message").hide("fast");
$.post( "login.php" , {username:$("#username").val(), password:$("#password").val()}, function(xml){
$("#message").html( $("message", xml).text() );
if($("message", xml).text() == "You are successfully logged in.")
{
$("#message").css({ "color": "green" });
$("#message").fadeIn("slow", function(){location.reload(true);});
}
else
{
$("#message").css({ "color": "red" });
$("#message").fadeIn("slow");
}
});
}
$("#newUser").click(function(){
return false;
});
});
答案 1 :(得分:8)
您需要使用$.post()
的展开形式$.ajax()
,以便将async
选项设置为false,如下所示:
jQuery.validator.addMethod("checkAvailability",function(value,element){
$.ajax({
url: "login.php",
type: 'POST',
async: false,
data: {username:"test", checking:"yes"},
success: function(xml) {
return $("message", xml).text() == "Available";
}
});
},"Sorry, this user name is not available");
目前,您的success
分析响应的函数在>>验证完成后发生,因为它是异步操作。所以目前,它在使用返回值时没有返回任何内容,undefined
〜= false
,这就是为什么它总是显示为false。通过将async
设置为false
,您可以在没有回调的情况下按顺序执行代码,因此实际使用上面示例中的返回。
另一种选择,如果你可以调整你的页面的返回结构是使用验证插件的内置remote
option,这只是为了这种事情:)
答案 2 :(得分:2)
好的,这可能不是那么相关,但我遇到了类似的问题。我没有对返回值做任何事情,我只是返回它。它总是如此。所以,经过一番探讨,我发现服务器的值显示为验证器的字符串。只要它不是一个空字符串就会返回true。所以解决方案是使用eval();
一个例子:
jQuery.validator.addMethod("checkAvailability",function(value,element){
return eval($.ajax({
url: "/check",
async: false,
data: {
field: $('#element').attr('name'),
val: value
}
}).responseText);
}, "error");