密碼強度問題

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