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>

Answer 2

从我发布的图片中看到的

我只能推测这是发生了什么。线条[input#pwd.form-control.input-error]在打印到控制台后立即进行评估。那就是那个时候，dom确实有一个类input error。但是，当您展开它时，dom会再次重新评估。那个时候，dom的班级input-error被删除了，所以你再也看不到了。我能够通过按顺序运行$('#pwd').addClass('input-error')和$('#pwd').removeClass('input-error')来证明这一点，图片位于

下面

基于此，我怀疑在将代码添加到dom之后不久，代码中有另一个逻辑删除了类，很可能是$(this).removeClass('input-error');。

JQuery addClass以非常奇怪的方式工作

2 个答案: