密码强度问题

Question

我已经编写了用于表单验证和密码强度检查器的代码。 如果完成某些要求，此表格只会通过 go。 我能够成功验证表单，但在显示密码强度时遇到问题。 在我输入强密码或弱密码后，它不会更新栏的颜色。 这是理解我的完整代码的完整代码片段。

<!DOCTYPE html>
<html>
<head>

<style>
  .strength-bar {
        width: 100%;
        height: 30px;
        background-color: lightgrey;
        border: 1px solid black;
        margin: 10px 0;
      }

      /* CSS for the strength meter */
      .strength-meter {
        height: 100%;
        background-color: green;
        transition: width 0.5s;
      }

      /* CSS for a weak password */
      .weak {
        width: 33%;
        background-color: red;
      }

      /* CSS for a strong password */
      .strong {
        width: 66%;
        background-color: orange;
      }
</style>



<script>
function validateForm() {
  var password = document.forms["myForm"]["password"].value;
  
  // Check if password contains at least one lowercase letter
  if (!password.match(/[a-z]/)) {
    alert("Error: Password must contain at least one lowercase letter!");
    return false;
  }
  
  // Check if password contains at least one uppercase letter
  if (!password.match(/[A-Z]/)) {
    alert("Error: Password must contain at least one uppercase letter!");
    return false;
  }
  
  // Check if password contains at least one number
  if (!password.match(/[0-9]/)) {
    alert("Error: Password must contain at least one number!");
    return false;
  }
  
  // Check if password is at least 8 characters long
  if (password.length < 8) {
    alert("Error: Password must be at least 8 characters long!");
    return false;
  }
  
  // If all checks pass, submit the form
  return true;
}


</script>
</head>
<body>

<form name="myForm" action="nextpage.html" onsubmit="return validateForm();" oninput="checkPassword();"  method="post">
  Name: <input type="text" name="name"><br>
  Password: <input type="password" name="password"><br>
  <div class="strength-bar">
    <div id="strength-meter" class="strength-meter"></div>
  </div>
  <br>
  <input type="submit" value="Submit">
</form> 
<script>
    // Function to check the password strength
function checkPassword() {
        // Get the password from the input field
        var password = document.getElementById("password").value;

        // Check if the password meets the requirements
        var hasUppercase = /[A-Z]/.test(password);
        var hasLowercase = /[a-z]/.test(password);
        var hasNumber = /\d/.test(password);
        var has8Chars = password.length >= 8;

        // Set the strength meter width and color
        var strengthMeter = document.getElementById("strength-meter");
        if (hasUppercase && hasLowercase && hasNumber && has8Chars) {
          // Strong password
          strengthMeter.style.width = "66%";
          strengthMeter.classList.remove("weak");
          strengthMeter.classList.add("strong");
        } else {
          // Weak password
          strengthMeter.style.width = "33%";
          strengthMeter.classList.remove("strong");
          strengthMeter.classList.add("weak");
        }
      }
</script>
</body>
</html>

我一遍又一遍地查看逻辑，检查逻辑是否不正确但是没问题。 我不知道为什么它仍然没有更新写入密码时的颜色。 它只显示绿色条。

Answer 1

看起来问题是您的代码仅在调用 function checkPassword 时才更新密码强度计，但实际上从未在您的代码中调用此 function。 每当用户在密码输入字段中键入内容时，您都需要调用 function，以便实时更新密码强度计。

您可以通过将 onkeyup 事件侦听器添加到密码输入字段并从事件侦听器中调用 checkPassword function 来完成此操作。 像这样

<!-- Password input -->
<input type="password" id="password" onkeyup="checkPassword()">

<!-- Password strength -->
<div id="strength-meter" class="strength-meter"></div>

每当用户在密码输入字段获得焦点时松开按键，这将调用 checkPassword function。 这将允许密码强度计在用户键入密码时实时更新。

密码强度问题

问题描述

1 个解决方案

解决方案1
2 2022-12-07 06:16:17

密码强度问题

问题描述

1 个解决方案

解决方案1 2 2022-12-07 06:16:17

解决方案1
2 2022-12-07 06:16:17