根据条件防止表格提交

Question

我已经使用jQuery构建了一个表单验证器，该jQuery提示用户密码要求以及当他们键入密码表单时是否满足它们。此代码正如我想要的那样工作，如下所示：

形式验证

 $('input[type=password]').keyup(function () {
        // set password variable
        var pwd = $(this).val();
        //validate the length
        if (pwd.length < 8) {
            $('#length').removeClass('glyphicon glyphicon-check valid').addClass('glyphicon glyphicon-check invalid');
        } else {
            $('#length').removeClass('glyphicon glyphicon-check invalid').addClass('glyphicon glyphicon-check valid');
        }
        //validate capital letter
        if (pwd.match(/[A-Z]/)) {
            $('#capital').removeClass('glyphicon glyphicon-check invalid').addClass('glyphicon glyphicon-check valid');
        } else {
            $('#capital').removeClass('glyphicon glyphicon-check valid').addClass('glyphicon glyphicon-check invalid');
        }
        //validate number
        if (pwd.match(/[0-9]/)) {
            $('#number').removeClass('glyphicon glyphicon-check invalid').addClass('glyphicon glyphicon-check valid');
        } else {
            $('#number').removeClass('glyphicon glyphicon-check valid').addClass('glyphicon glyphicon-check invalid');
        }
    }).focus(function () {
        $('#pwd_info').show();
    }).blur(function () {
        $('#pwd_info').hide();
    });
});

现在，我想防止在满足这些要求之前提交按钮，并且我已将以下功能添加到我的文档中，试图这样做：

停止表单提交

$(document).ready(function () {
    $('#signup_btn').submit(function (e) {
        var pwd = $('input[type=password]').val();
        if (pwd.length < 8) {
            e.preventDefault();
        }
        if (pwd.match(/[A-Z]/)) {
            e.preventDefault();
        }
        if (pwd.match(/[0-9]/)) {
            e.preventDefault();
        } 
else
            return true;
    });

当我尝试根据我的条件（1个数字，1个资本和8个字符）提交无效密码时，它仍然可以通过。有人可以向我指向正确的方向吗？

Answer 1

您想捕获submit事件，执行您的验证以及return false如果有任何验证失败。

$('#signup_btn').submit(function(e) {
  var err = 0;
  $('input[type="text"]').each(function() { 
    if (!$(this).val()) {
      err = 1;
    }
  })
  if (err != 0) {
    console.log('errors');
    return false;
  }
  console.log('submitted');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="signup_btn">
  <input type="text" placeholder="needs text">
  <input type="text" placeholder="needs text">
  <input type="submit">
</form>

Answer 2

$(document).ready(function () {
$('#signup_btn').submit(function (e) {
    var pwd = $('input[type=password]').val();
    if (pwd.length < 8) {
        return false;
    }
    if (pwd.match(/[A-Z]/)) {
        return false;
    }
    if (pwd.match(/[0-9]/)) {
        return false;
    }   
else
        return true;

});