Question

我一直在努力尝试使用ajax验证电子邮件使用PHP和Javascript。我想做的是检查电子邮件已存在于数据库中，如果是，则显示消息然后转到回到表单，否则显示成功消息并关闭形成。问题是，如果电子邮件存在，它正在显示 “错误消息”，然后显示成功消息。我查过了类似的问题并尝试了其中的代码，但没有一个适用正确地符合我的要求。谢谢。

这就是我所拥有的：

// JavaScript Document
$('#btnSubmit').click(function(){
    if(  validateForm() ){
        // code to submit all the info, display the success message and close the form
    }
    else return false;
});


// I created a function to validate all the fields in the form
function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        $.ajax({
            url:"check_user.php",   // url that will use
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data > 0 ) {
                    message = "This email is registered already!";
                    messageDialog("Error", message, "error", 2);
                    return false;                   
                 }
                 else { return true;}
            }
        });

    }

    // if everything is right then return true so the submit function continue its execution
    return true;
}

Answer 1

执行ajax请求，默认情况下是异步的，这意味着在执行其余功能之前，它不会等待请求的响应。

因此，在您的情况下，一旦提出请求，它将返回true，如函数结束所述。然后，当您的ajax请求的响应返回时，它将触发您的success函数，该函数将显示错误消息。

您可以使用async函数的$.ajax参数执行此类操作，以确保在进一步操作之前等待请求的响应。

function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        var valid = false;
        $.ajax({
            url:"check_user.php",
            async: false,
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data == 0 ) {
                    valid = true;
                }
            }
        });
        if(!valid) {
             message = "This email is registered already!";
             messageDialog("Error", message, "error", 2);
             return false;
        } else { return true; }
    }
    }

Answer 2

我没有看到任何成功消息，但我认为当电子邮件地址已经存在时，您的validate()函数会返回true。

这是因为您的ajax调用是异步的，并且在validate()函数完成时尚未完成。除此之外，您从匿名success函数返回的内容不是从您的ajax调用返回的内容;你甚至不使用ajax调用的返回值。

您可以使ajax调用同步并使用变量来设置它的返回值，也可以返回ajax调用的返回值，并在ajax调用完成后继续处理。

Answer 3

在Ajax调用中，成功函数是异步的，这意味着如果函数到达检查你的电子邮件，你的函数将始终返回。

要纠正这个问题，你必须从你的上一个else和内部成功函数中删除return true，调用一个将关闭你的表单的函数：

// JavaScript Document
$('#btnSubmit').click(function(){
    if(  validateForm() ){
        // code to submit all the info, display the success message and close the form
    }
    else return false;
});


// I created a function to validate all the fields in the form
function validateForm() {
    var firstName = $('#txtFirstName').val();
    var lastName = $('#txtLastName').val();
    var email = $('#txtMail').val();

    // to validate firstName and lastName I do it like this:
    if(!firstName || firstName.length === 0) {
        message = "All fields are mandatory\\nFirst Name is required";
        messageDialog("Warning", message, "warning", 2);
        return false;
    } 
    if( !firstName.match(letters) ) {
        message = "Invalid name";
        messageDialog("Warning", message, "warning", 2);
        return false;
    }
    // So far, no problem at all. But when I tried to validate email:
    else {
        // use ajax to check if a user has been previously registered
        // using this email
        $.ajax({
            url:"check_user.php",   // url that will use
            data:{                  // data that will be sent
                email:email
            },
            type:"POST",            // type of submision
            dataType:"text",        // what type of data we'll get back
            success:function(data)
            {    
                // if check_user returns a number different than 0
                // means that there's already a user registered with that email
                if(data > 0 ) {
                    message = "This email is registered already!";
                    messageDialog("Error", message, "error", 2);
                    return false;                   

                 } else {
                   // code to submit all the info, display the success message and close the form
                 yourfunctiontocloseyourform()
                 }
            }
        });
        return false;

    }

}

使用JQuery Ajax进行电子邮件验证

3 个答案: