javascript - JQuery addClass 以一种非常奇怪的方式工作

Question

我有一个包含 3 个输入的表单:2 个用于用户名和电子邮件的文本输入以及第三个密码输入，您猜对了，一个密码。

我在 JQuery 中验证这些输入字段，当输入为空或与其格式不匹配时，它会向输入添加一个带有红色边框的类。代码如下:

if ($("input#username").val().length < 6) {
                $("input#username").addClass('input-error');
                next_step = false;
            } else if (!isEmail($("#email").val())) {
                $("#email").addClass('input-error');
                next_step = false;
            } else if (!isPassword($("#pwd").val())) {
                $("#pwd").addClass('input-error');
                next_step = false;
            }

            else {

                $(this).removeClass('input-error');
                next_step = true;
            }

它与用户名和电子邮件字段完美配合，如果密码字段为空，它也可以正常工作，但即使它完美验证，如果密码不符合要求，addClass() 也不起作用(至少一个大写字母和一个数字)。

这是浏览器控制台显示的内容:

如您所见，它有点添加类，但实际上并非如此。怎么了？如果您需要 HTML 代码和/或 CSS 代码，请告诉我!

感谢您的关注!

编辑这是请求的 HTML 和 CSS:

<fieldset>
                <div class="form-bottom">
                            <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
                            <br>
                            <br>
                            <br>
                            <div class="form-group">
                                <label for="username"><h1>USERNAME:</h1></label>
                                <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
                            </div>

                            <div class="form-group">
                                <label for="email"><h1>E-MAIL:</h1></label>
                                <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
                            </div>
                            <div class="form-group">
                                <label for="pwd"><h1>PASSWORD:</h1></label>
                                <input type="password" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
                            </div>
                            <div class="text-center">
                                <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
                            </div>
                        </div>
                    </fieldset>

和CSS:

.form-control {
    height: 40px;
    border: 2px solid black;
    border-radius: 0;
    font-size: 14px;
}

.form-control:focus {
    border: 2px solid black;
    box-shadow: 0;
}
.input-error {
    border-color: #FF2859;
}

Answer 1

这对我有用。

如果您有这种设置，请评论什么仍然不起作用？

function isEmail(email) { // dummy example
  return email.indexOf("@")>1;
}
function isPassword(passwd) { // dummy example
  return passwd.indexOf("x")>=0; // must contain x
}

$(function() {
  $(".btn-next").on("click", function() {
    $(".form-group input").removeClass('input-error');
    var next_step = true,
    user = $("#username").val(),
    email = $("#email").val(),
    pwd=$("#pwd").val();
    if (user.length < 6) {
      $("#username").addClass('input-error');
      next_step = false;
    } else if (!isEmail(email)) {
      $("#email").addClass('input-error');
      next_step = false;
    } else if (!isPassword(pwd)) {
      $("#pwd").addClass('input-error');
      next_step = false;
    }
    console.log(next_step);
  });
});

.form-control {
  height: 40px;
  border: 2px solid black;
  border-radius: 0;
  font-size: 14px;
}

.form-control:focus {
  border: 2px solid black;
  box-shadow: 0;
}

.input-error {
  border-color: #FF2859;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<fieldset>
  <div class="form-bottom">
    <img src="img/gbsnlogo.svg" alt="GBSN Research" name="GBSN Research" width="50%" class="signupLogo" />
    <br>
    <br>
    <br>
    <div class="form-group">
      <label for="username"><h1>USERNAME:</h1></label>
      <input type="text" class="form-control" id="username" placeholder="Enter username..." name="username">
    </div>

    <div class="form-group">
      <label for="email"><h1>E-MAIL:</h1></label>
      <input type="text" class="form-control" id="email" placeholder="Enter e-mail..." name="email">
    </div>
    <div class="form-group">
      <label for="pwd"><h1>PASSWORD:</h1></label>
      <input type="text" class="form-control" id="pwd" placeholder="Enter password..." name="pwd">
    </div>
    <div class="text-center">
      <button type="button" class="btn-next btn-nav"><h1>NEXT</h1></button>
    </div>
  </div>
</fieldset>