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

Posted 2023-02-24

【中文标题】使用 JQuery Ajax 进行电子邮件验证

【英文标题】：Email validation using JQuery Ajax

【发布时间】：2013-12-21 07:12:15

【问题描述】：

我一直在努力尝试使用 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;

【问题讨论】：

查看此链接http://***.com/questions/17180025/jquery-validation-plugin-check-if-email-exists

ajax 是异步的，你不能从成功回调中返回任何值

【参考方案1】：

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

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

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

【参考方案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; 
    
    

【讨论】：

非常感谢！！它工作得很好！只是一个问题，我在其他一些帖子中读到将“异步：”设置为“假”不是一个好习惯。真的吗？会不会影响表演？再次感谢！

根据定义，AJAX 请求是异步的（AJAX 中的第一个 A 表示异步），这就是为什么您可能会读到使用 async:false 不是一个好习惯的原因。但是，在我看来，如果需要，以同步方式使用它并没有错。话虽如此，您绝对可以找到一种使用异步请求执行验证的方法，但这需要对您的方法进行一些更改：在用户填写字段时执行检查，并仅在表单有效时启用回调上的提交按钮.此外，请记住也要在服务器端执行验证。

好的，知道了。再次感谢

【参考方案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;