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

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

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

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

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

Answer 2

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

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

您可以执行类似的操作，使用 $.ajax 函数的 async 参数确保它会等待您的请求响应，然后再继续。

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 3

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

要纠正这个问题，您必须从最后一个 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;

    }

}