Question

我一直在努力改进我的javascript验证，并且通过互联网（包括stackoverflow）的帮助已经能够创建我需要的东西。我唯一的问题是检查多个函数= 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

你不必将功能包装在

中

 $(document).ready();

这将改变函数调用/引用的范围，这不是一个好习惯。因为这可以帮助您解决函数的返回值。一切都好！

Answer 2

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

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

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

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

我们还需要更改你的检查函数，以返回.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以了解有关其延期/承诺的更多信息。您还可以查看其他承诺库，例如Q，看看它们是如何工作的，因为它们倾向于使用相同的原则并使用类似的方法名称。

Answer 3

要进行多次布尔检查，我会创建一个全局变量（例如，allValid），立即设置为您的控制值（true或false）...然后在每次验证时函数，只有在某些内容无效时才更改变量，所以：

var allValid = true;
if(!/*validation requirement*/) { allValid = false; }
allValid = anotherValidationFunction() || false;

if(!allValid) { /*something's invalid*/ }

我不知道这是否合理。

Answer 4

看起来你正在进行ajax调用以进行验证。我猜这些是asynchronous次调用（不适用于您的代码）。

我的猜测（对不起，我没时间测试）是你的函数check_username_availability和check_email会立即返回“undefined”，这就是为什么你的验证总是抛出警告。< / p>

相反，您要做的是进行同步调用，或使用回调来调用必要的函数。

Answer 5

您可以采取一些措施来改进代码。

您可能不必发出两个单独的请求，将用户名和电子邮件直接传递给您的php代码，并且您将节省出来的HTTP请求。

onsubmit =＆＃34;返回RegFormValidation（）;＆＃34;应该在jQuery中更改为绑定调用。给表单一个ID并执行类似的操作

<form id="registerForm">....

$("form#registerForm").on('submit', function(e){

});

您已获得var username = $('#username').val();

然后

 if($('#username').val().length > min_chars || characterReg.test($('#username').val()))
            {

你可能会稍微清理一下并重用变量，而不是继续调用jQuery函数。帕特里克在上面的回答是一些好的开始，我认为解决了你遇到的整体问题。

在提交之前，在Javascript中检查多个函数是正确的

5 个答案: