密码强度问题

Question

I have written a code for form validation and password strength checker.我已经编写了用于表单验证和密码强度检查器的代码。 This form will only go through if it completes the certain requirements.如果完成某些要求，此表格只会通过 go。 I am able to successfully validate the form but having issue on showing password strength.我能够成功验证表单，但在显示密码强度时遇到问题。 It's not updating the color of the bar after i type the strong or weak password.在我输入强密码或弱密码后，它不会更新栏的颜色。 Here's the complete code snippet to understand my complete code.这是理解我的完整代码的完整代码片段。

<!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>

I looked through the logic again and again to check if the logic is incorrect but it's all right.我一遍又一遍地查看逻辑，检查逻辑是否不正确但是没问题。 I have no idea why it's still not updating the color on writing password.我不知道为什么它仍然没有更新写入密码时的颜色。 It only shows the green bar.它只显示绿色条。

Answer 1

looks like the issue is that your code is only updating the password strength meter when the function checkPassword is called, but this function is never actually called in your code.看起来问题是您的代码仅在调用 function checkPassword 时才更新密码强度计，但实际上从未在您的代码中调用此 function。 You need to call the function whenever the user types something in the password input field, so that the password strength meter is updated in real time.每当用户在密码输入字段中键入内容时，您都需要调用 function，以便实时更新密码强度计。

You can do this by adding an onkeyup event listener to the password input field, and calling the checkPassword function from within the event listener.您可以通过将 onkeyup 事件侦听器添加到密码输入字段并从事件侦听器中调用 checkPassword function 来完成此操作。 Like this像这样

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

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

This will call the checkPassword function whenever the user releases a key while the password input field is focused.每当用户在密码输入字段获得焦点时松开按键，这将调用 checkPassword function。 This will allow the password strength meter to be updated in real time as the user types their password.这将允许密码强度计在用户键入密码时实时更新。

密码强度问题

问题描述

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