javascript - 提交前检查 Javascript 中的多个函数是否为真

Question

我一直在努力改进我的 javascript 验证，并且在互联网(包括 stackoverflow)的帮助下已经能够创建我需要的东西。我遇到的唯一问题是检查 multiple functions = true 似乎不起作用。这让我发疯，我希望有人能提供帮助。

我要做的是检查用户名和电子邮件是否在设置的变量内，以及用户名和电子邮件是否未被使用。用户名和电子邮件的可用性显示在您输入时它是否可用。效果很好，唯一的问题是如果用户在一个或多个不可用时单击注册，表单仍然会被提交。为了克服这个问题，我考虑使用 if 语句来检查多个函数是否为真，如果为真，则将详细信息传递给 php 脚本，如果不为真，则显示警告消息。

出于某种原因，即使用户名和电子邮件在表单上显示为可用，它也会不断显示“不可用”的警告消息。我检查了数据库表，php 代码工作正常。

下面是代码

html:

  <form name="regForm" role="form" action="php/registerphp.php" method ="post" 
  onsubmit="return RegFormValidation();">


  <fieldset>
  <div class="form-group">
    <label for="username">Username</label><span>*</span><span> </span><span id="username_availability_result"></span>
    <input type="username" class="form-control" id="username" 
    placeholder=" Enter a username" name="username">

  </div>
  <div class="form-group">
    <label for="email">Email address</label><span>*</span><span> </span><span id="email_availability_result"></span>
    <input type="email" class="form-control" id="email" 
    placeholder=" Enter email" name="email">
  </div>

Javascript

function RegFormValidation()
{  
    if(check_username_availability() && check_email()) {
        return true;
    } else 
    {
        alert("Username or Email not correct.");
        return false;               
    }
}



$(document).ready(function username_correct_format() 
{  


        var min_chars = 3;  
        var characterReg = /^\s*[a-zA-Z0-9,\s]+\s*$/; 
        var characters_error = ' - Min. characters required is 3, only use letters and numbers.';  
        var checking_html = 'Checking...';  


        $('#username').keyup(function()
        {  

            if($('#username').val().length > min_chars || characterReg.test($('#username').val()))
            {  
                //else show the checking_text and run the function to check  
                $('#username_availability_result').html(checking_html);  
                check_username_availability(); 

            }else
            {  

                //if it's bellow the minimum show characters_error text '  
                $('#username_availability_result').html(characters_error);  
            }


        });  

});  

//function to check username availability  
function check_username_availability()
{  


        var username = $('#username').val();  


        $.post("php/check_username.php", { username: username },  
            function(result)
            {  

                if(result == 1)
                {  

                //show that the username is available  
                $('#username_availability_result').html('<span class="is_available"> is available</span>');                    
                return true;
                }else
                {  
                //show that the username is NOT available  
                $('#username_availability_result').html('<span class="is_not_available"> is not available</span>');
                return false;
                }  
        });    
} 



$(document).ready(function email_correct_format() 
{  


        var min_chars = 4; 
        var characters_check = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        var characters_error = ' - only 1 email address per user.';  
        var checking_html = 'Checking...';  


        $('#email').keyup(function()
        {  


            if($('#email').val().length > min_chars && characters_check.test($('#email').val()))
            {
                //else show the cheking_text and run the function to check  
                $('#email_availability_result').html(checking_html);  
                check_email();    

            }else
            {  
                //if it's bellow the minimum show characters_error text '  
                $('#email_availability_result').html(characters_error); 

            }  
        });  

});  

//function to check email availability  
function check_email()
{  


        var email = $('#email').val();  

        $.post("php/check_email.php", { email: email },  
            function(result)
            {  

                if(result == 1)
                {  

                    //show that the email is available      
                    $('#email_availability_result').html('is available '); 
                    return true;
                }else
                {  
                    //show that the email is NOT available  
                    $('#email_availability_result').html('<span class="is_not_available"> is already registered.</span>'); 
                    return false;
                }  
            });  

} 

Answer 1

因为您的检查是使用异步方法完成的，所以您的检查方法将在发出请求之前返回，所以您的函数也不会返回任何东西。因此每个人都将返回 undefiend

您可以使用 jQuery's .when method等待一个或多个请求完成，然后执行一些功能。

首先需要做的是将事件对象和表单对象传递给验证函数。我们需要事件对象来调用 preventDefault，这样表单就不会在它应该提交之前提交。

然后我们需要更改验证函数，以便它调用两个检查函数并设置一个 promise ，在它们完成时调用回调。

我们还需要更改您的检查函数以返回 .post 方法返回的 promise 对象，以便 .when 方法可以使用它们。

之后，您只需对返回的数据和过程进行检查即可。

HTML

<form name="regForm" role="form" action="php/registerphp.php" method ="post" 
  onsubmit="return RegFormValidation(event,this);">

Javascript

function RegFormValidation(e,form) {  
    //Prevent the form submission
    e.preventDefault();
    //Each check function returns a promise object
    jQuery.when(check_username_availability(),check_email())
       .done(function(usernameResponse,emailResponse){
           //the responses passed back to the callback will be in an array
           //element 0 is the actual data retrieved
           //element 1 is the status (success, error, etc)
           //element 2 is the promise object

           if(usernameResponse[0] == 1 && emailResponse[0] == 1){
               //if everything is ok manually submit the form
               form.submit();
           } else {
               alert("Username or Email not correct.");
           }
     });
}

function check_username_availability() {  
    var username = $('#username').val();  
    return $.post("php/check_username.php", { username: username })
        .then(function(data){
           if(data == 1) {
              $('#username_availability_result').html('<span class="is_available"> is available</span>');                    
           } else {  
              $('#username_availability_result').html('<span class="is_not_available"> is not available</span>');
           }
           //We have to return the data here to make sure it gets passed
           //to the done callback from the validation function
           return data;
        });
} 
function check_email() {  
    var email = $('#email').val();  
    return $.post("php/check_email.php", { email: email })
        .then(function(data){
           if(data == 1) {
              $('#email_availability_result').html('<span class="is_available"> is available</span>');                    
           } else {  
              $('#email_availability_result').html('<span class="is_not_available"> is not available</span>');
           }
           //We have to return the data here to make sure it gets passed
           //to the done callback from the validation function
           return data;
        });
} 

可以看看jQuery's api section Deferred Objects了解更多关于他们的延期/ promise 。您还可以查看其他 promise 库，例如 Q看看它们是如何工作的，因为它们往往遵循相同的原则并使用相似的方法名称。