0

我正在检查数据库中的重复电子邮件。首先我检查了有效的电子邮件，然后检查了电子邮件的长度，然后我使用 ajax 从数据库中检查了电子邮件。所以 return true 或 return 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;
    }
}

});

4

1 回答 1

1

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

因此，当您进行 ajax 调用时，成功或错误回调不会立即运行。

要使上述代码可行，您可以将 'async : false' 添加到 ajax 调用参数中。

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

理想的方式是

  1. 显示一些处理/加载图标
  2. 发送 AJAX 调用
  3. 得到响应后，隐藏处理/加载图标
  4. 根据响应，显示错误/成功消息。
于 2013-03-08T06:46:28.377 回答