Question

我有一个Bootstrap登录表单和Javascript验证：

HTML

<form id="loginForm" class="form-horizontal" role="form" action="registration.php" method="POST">
        <div class="form-group">
                <label class="control-label col-sm-2 modal-text" for="loginEmail">Email:</label>
                <div class="col-sm-10">
                    <input type="email" class="form-control modal-input" id="loginEmail" placeholder="Insert email"/> 
                </div>
        </div>
        <div class="form-group">
                <label class="control-label col-sm-2 modal-text" for="loginPassword">Password:</label>
                <div class="col-sm-10">
                    <input type="password" class="form-control modal-input" id="loginPassword" placeholder="Insert password"/> 
                </div>
        </div>
        <div class="form-group">
                <div class="col-sm-offset-2 col-sm-10">
                        <div class="checkbox">
                                <label class="modal-text"><input type="checkbox"/> Remember me</label>
                        </div>
                </div>
        </div>
        <button type="button" class="btn btn-default btn-block buttons" id="loginBtn">Login</button>
</form>

这是我的Javascript验证：

function validateEmail(id){
     var $div = $('#' + id).closest('div');
     var regex = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;

     if(!regex.test($('#' + id).val()))
     {
         $div.addClass('has-error');
         return false;
     }
     else
     {
         $div.removeClass('has-error');
         return true;
     }
}

function validateText(id){
     var $div = $('#' + id).closest('div');

     if($('#' + id).val() == null || $('#' + id).val() == '')
     {
         $div.addClass('has-error');
         return false;
     }
     else
     {  
         $div.removeClass('has-error');
         return true;
     }
}

$(document).ready(function (){
     $('#loginBtn').click(function (){

          if(!validateEmail('loginEmail'))
          {
               return false;
          }
          if(!validateText('loginPassword'))
          {
               return false;
          }

          $('form#loginForm').submit();

      });
});

如果我按下登录按钮，即使字段为空，表单也会立即提交。是否有我错过或做错的事情？

更新我发现的是我在我的正则表达式周围加上引号导致javascript错误。我还将按钮类型从提交更改为按钮。现在它正在发挥作用。

总而言之：由于正则表达式中的引号，我的验证无效。即使我离开按钮类型提交，验证也会有效。

Answer 1

使用onsubmit代替onclick，并在表单有效时返回true。

在您的情况下，onclick事件将被触发，正确返回false，然后当按钮仍为submit类型时，它仍会提交表单。

Answer 2

无论如何都提交，因为按钮是提交按钮：

<button type="submit"

click 处理程序返回false会取消 click 事件，但不会发生其他事件 - 即提交事件仍会触发。

您可以将按钮更改为type=button，然后在点击处理程序中提交表单（您已经在执行此操作）：

<button type="button"

Answer 3

您使用了type="submit"和method="POST"的按钮。因此，当您单击按钮时，它会立即提交表单。请尝试type="button"作为提交按钮。

Answer 4

停止事件处理，可能您不想做任何其他事情，只要提交表格有效

$('#loginBtn').click(function (Evt){
          Evt.stopPropagtion();
          Evt.preventDefault(); 
          if(!validateEmail('loginEmail'))
          {
               return false;
          }
          if(!validateText('loginPassword'))
          {
               return false;
          }

          $('form#loginForm').submit();

      });

即使返回值为false，为什么表单仍然提交？

4 个答案: