返回true/false在ajax代码中不起作用


return true/false is not working in ajax code

我正在检查数据库中重复的电子邮件。首先,我检查了有效的电子邮件,然后检查了电子邮件长度,然后我检查了电子邮件从数据库使用ajax。因此,返回true或返回false在ajax代码中不起作用。其他验证是可以的,但检查重复的电子邮件不起作用。另外,ajax响应是可以的。
这里是我的js文件-

$(document).ready(function(){
var form = $("#form");
var registeremail = $("#registeremail");
var emailInfo = $("#emailInfo");
registeremail.blur(validateEmail);
registeremail.keyup(validateEmail);

form.submit(function(){
    if(  validateEmail() )
        return true;
    else
        return false;
});

function validateEmail(){
    //testing regular expression
    var a = $("#registeremail").val();
    var filter = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
    //if it's valid email
    if(filter.test(a)){
        registeremail.removeClass("error");
         emailInfo.text("");
        emailInfo.removeClass("error");
        if(registeremail.val().length < 8){
            registeremail.addClass("error");
            emailInfo.text("Min 8 letters required.");
            emailInfo.addClass("error");
            return false;
        }
        else if(registeremail.val().length > 60){
            registeremail.addClass("error");
            emailInfo.text("Max 60 letters required.");
            emailInfo.addClass("error");
            return false;
        }
        else
            { 
            $.ajax({
                  url: "home/CheckEmail",
                  data: {
                      email: a
                  },
                  success: function(ret)
                  {
                    if(ret=='1')
                    {
                        registeremail.addClass("error");
                        emailInfo.text("Email already exist.");
                        emailInfo.addClass("error");
                        return false;
                    }
                    else if(ret != '1')
                    {
                          registeremail.removeClass("error");
                          emailInfo.text("");
                          emailInfo.removeClass("error");
                          //document.forms["form"].submit();
                         return true; 
                    }
                  }
            });
            }
    }
    //if it's NOT valid
    else{
        registeremail.addClass("error");
        emailInfo.text("Valid e-mail please");
        emailInfo.addClass("error");
        return false;
    }
}

});

默认情况下,jQuery的ajax调用将异步运行。

所以,当你做一个ajax调用,成功或错误回调不会立即运行。

为了使上面的代码可行,你可以在ajax调用参数中添加'async: false'。

但是进行同步ajax调用将冻结UI,直到它完成。如果后端api调用需要很长时间才能完成,那么这将成为一个show-stopper。

理想的方式是

  1. 显示一些处理/加载图标
  2. 发送AJAX调用
  3. 收到响应后隐藏处理/加载图标
  4. 根据响应显示错误/成功消息。