JQuery Ajax PHP验证注册


JQuery Ajax PHP validating signup

我目前正在尝试使用Jquery验证我的注册表单,Jquery在用户提交表单后运行。

我有以下jquery功能:

$('#signupForm').submit(function() {
    if($('#email').val() == "" || 
        $('#password').val() == "" ||
        $('#repassword').val() == "" ){
            alert('empty form');
        return false;
    }
    if($('#password').val() != $('#repassword').val()){
        alert('password does not match');
        return false;
    }
    //check if email is available
    var isemailavailable = true;
    $.ajax({
        url: "php_includes/registerlogic.php",
        type: "POST",
        data: {checkemail: $('#email').val()},
        dataType: 'json',
    }).done(function(data){
            var resultObject = $.parseJSON(JSON.stringify(data));
            //alert(data);
            console.log(resultObject.data);
        if(resultObject.data=='taken') {
                //return false;
                console.log('inside taken');
                isemailavailable = false;
                console.log(isemailavailable);
            }else{
                alert($.trim(data));
                isemailavailable = true;
            }
    });
    if(isemailavailable == false){
        alert("email already exists!");
        return false;
    }
});

Ajax点击此页面查看电子邮件可用性:

if(isset($_POST["checkemail"])){
$email = preg_replace('#[^a-z0-9]#i', '', $_POST['checkemail']);
$query = $db->query('SELECT * FROM users WHERE user_email= :email LIMIT 1', array(':email'=>$_POST['checkemail']));
$isavailable = "";
if(count($query) < 1){
    $isavailable = 'available';
}else{
    $isavailable = 'taken';
}
$respond = array("data" => $isavailable);
$out = json_encode($respond);
echo $out;
exit();

}

好吧,我的问题是Jquery,在我有if(isemailavailable==false)部分之前,一切都很好。即使isemailavailable为false,代码也不会进入if内部。因此,表单将被提交为if语句中的"return false"。我也试过if(!isemailavailable),但它也不起作用。

任何帮助或建议都将不胜感激。Thanks

您的问题是if语句在ajax请求完成之前运行。

您应该将该代码块移动到.done()函数内部:

$.ajax({
    url: "php_includes/registerlogic.php",
    type: "POST",
    data: {checkemail: $('#email').val()},
    dataType: 'json',
}).done(function(data){
        var resultObject = $.parseJSON(JSON.stringify(data));
        //alert(data);
        console.log(resultObject.data);
        if(resultObject.data=='taken') {
            //return false;
            console.log('inside taken');
            isemailavailable = false;
            console.log(isemailavailable);
        }else{
            alert($.trim(data));
            isemailavailable = true;
        }

        if(isemailavailable == false){
          alert("email already exists!");
          //return false;
        }
});

尽管当您处理该函数中的所有内容时,不需要额外的if

返回false也不会做您期望它在那里做的事情,所以这也不是必要的。

您可能应该在电子邮件字段失去焦点后立即对其进行验证,并在其无效时禁用提交按钮。

另一种方法是将async设置为false以获得同步ajax请求:

$.ajax({
    url: "php_includes/registerlogic.php",
    type: "POST",
    data: {checkemail: $('#email').val()},
    dataType: 'json',
    async: false
}).done(function(data){

但就我个人而言,我会在字段失去焦点后立即/尽快进行电子邮件验证。