Question

我有一个键盘功能，可以检查输入密码字段的字符数。它在大多数情况下都有效，但是如果我删除这些字符，我就无法弄清楚如何让图像重置回默认状态。

我该怎么做？

$('#register').keyup(function() {
  var password = $("#password").val();
  if (password.length >= 6) {
    $("#characters").addClass('none');
    hasError = true;
  }
});

.none {
  display: none;
}
#password-check {
  margin: 30px auto;
}
.password-check-field {
  color: black;
}
.password-check-field img {
  margin-right: 15px;
  height: 15px;
  width: 15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" id="register">
  <div class="field">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" required>
  </div>
  <div class="field">
    <label for="password">Choose a password</label>
    <input type="password" name="password" id="password" required>
  </div>
  <div id="password-check">
    <div class="password-check-field">
      <img id="characters" src="icons/collection/delete.png" alt="Success">Your password has at least 6 characters</div>
  </div>

  <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
  <label for="signinButton">
    <input id="signinButton" name="submit" type="submit" value="Register">
  </label>
  <br>
</form>

更新

<div class="password-check-field">
    <img id="characters" src="icons/collection/delete.png" alt="Success">
    <img id="charactersOK" class="none" src="icons/collection/checkmark.png" alt="Success">
    Your password has at least 6 characters
</div>

$("#charactersOK").addClass("block");

Answer 1

当密码长度小于6个字符时，您需要检查案例，如果是，请删除none类。您可以使用toggleClass();

使此逻辑更简洁

另请注意，您的hasError变量似乎倒退了;当true时，它应该只有password < 6。试试这个：

＆＃13;

$('#register').keyup(function() {
  var passwordLengthValid = $("#password").val().length >= 6;
  $("#characters").toggleClass('none', passwordLengthValid);
  var hasError = !passwordLengthValid;

  // Note that if you want to change image src instead of hide it, use this:
  $('#characters').attr('src', passwordLengthValid ? 'valid-image.jpg' : 'error-image.jpg');
});

＆＃13;

.none {
  display: none;
}
#password-check {
  margin: 30px auto;
}
.password-check-field {
  color: black;
}
.password-check-field img {
  margin-right: 15px;
  height: 15px;
  width: 15px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form action="" method="POST" id="register">
  <div class="field">
    <label for="firstname">First Name</label>
    <input type="text" name="firstname" required>
  </div>
  <div class="field">
    <label for="password">Choose a password</label>
    <input type="password" name="password" id="password" required>
  </div>
  <div id="password-check">
    <div class="password-check-field">
      <img id="characters" src="icons/collection/delete.png" alt="Success">Your password has at least 6 characters</div>
  </div>

  <input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
  <label for="signinButton">
    <input id="signinButton" name="submit" type="submit" value="Register">
  </label>
  <br>
</form>

＆＃13;

Answer 2

试试这个

if (password.length >= 6) {
  $("#characters").addClass('none');
  hasError = true;
} else {
  $("#characters").removeClass('none')
  hasError = false;
}

Answer 3

添加else：

if(password.length >= 6) {
    $("#characters").addClass('none');
    hasError = true;
} else {
    $("#characters").removeClass('none');
    hasError = false;
}

另外，你hasError倒退了吗？如果字符数超过6个，则不应该出现错误，因此hasError应为false？

Answer 4

如果不需要，您应该删除该课程。

$('#register').keyup(function() {
  var password = $("#password").val();
  if (password.length >= 6) {
    $("#characters").addClass('none');
    hasError = true;
  } else{
    $("#characters").removeClass('none');
    hasError = false;
  }
});

Answer 5

您可以使用toggleClass：

$('#register').keyup(function() {
  var password = $("#password").val();
  hasError = password.length >= 6; // make sure to set the correct error condition here
  $("#characters").toggleClass('none', hasError);
});

获取javascript函数重置

5 个答案: