javascript - 使用 and 运算符更改标志 bool 状态的问题

Question

您能看一下this demo吗？并让我知道为什么我无法通过

正确更改 flag boolean (varproce = false;) 的状态

if (emailInput($('#email')) && emptyPass($('#password'))) {}

如您所见，我正在尝试检查 emailInput() AND emptyPass() 是否返回 inputData 然后将 bool 值更改为 true 但似乎代码仅在两个输入都为空时才对 emailInput() 起作用! (但是，如果用户填写电子邮件输入，则会显示密码错误消息)

$(function () {
    var proceed = false;
    var emailRegex = /^([\w-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([\w-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/;

    function emailInput(elem) {
        inputData = $.trim(elem.val());
        if (inputData == "") {
            elem.parent().after('<div class="alert alert-danger err" role="alert">Field Can Not Be Empty</div>').slideDown("slow");
        } else if (!emailRegex.test(inputData)) {
            elem.parent().after('<div class="alert alert-danger err" role="alert">Please Enter Valid Email Address</div>').slideDown();
        } else {
            return inputData;
        }
    }

    function emptyPass(elem) {
        inputData = $.trim(elem.val());
        if (inputData == "") {
            var $div = $('<div/>', {
                class: 'alert alert-danger err',
                role: 'alert'
            }).hide().text('No Empty');
            $div.insertAfter(elem.parent());
            $div.slideDown("slow");
        } else {
            return inputData;
        }
    }

    $("#login").on("click", function (e) {
        $(".err").hide();
        if (emailInput($('#email')) && emptyPass($('#password'))) {
            tempEmail = $('#email').val();
            tempPass = $('#password').val();
            proceed = true;
        }

        if (proceed) {
            var data = 'email=' + tempEmail + '&pass=' + tempPass;
            console.log(data);

        }
        e.preventDefault();
    });
});

@import url("https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css");
body {
    padding:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form accept-charset="UTF-8" role="form" id="login-form" method="post">
    <fieldset>
        <div class="form-group input-group" id="emailBox"> <span class="input-group-addon">
            @
          </span>

            <input class="form-control" placeholder="Email" name="email" type="email" id="email">
        </div>
        <div class="form-group input-group" id="passBox"> <span class="input-group-addon">
            <i class="glyphicon glyphicon-lock">
            </i>
          </span>

            <input class="form-control" placeholder="Password" name="password" type="password" id="password">
        </div>
        <div class="form-group">
            <button type="submit" id="login" class="btn btn-primary btn-block">Access</button>
            </button>
    </fieldset>
</form>

Answer 1

有两件事:首先，您需要使用 var 声明局部变量(proceed、inputData)。其次，您需要了解 && 运算符仅在左侧表达式成功时才会计算右侧表达式。如果电子邮件地址为空或无效，则 && 将停止，并且根本不会测试密码字段。

您可以确保双方都经过这样的测试:

  var proceed = true;
  if (!emailInput($('#email')))
    proceed = false;
  if (!emptyPass($('#password')))
    proceed = false;

此后，仅当电子邮件地址和密码都正确时，proeed 才会为 true。

Here is an updated version of your jsfiddle.