MENU
  1. ホーム
  2. JS
  3. JavaScript
  4. パスワードメーター

パスワードメーター

JavaScript
2024.05.25

パスワード入力フィールドに文字を入力するたびに、その強度を評価して表示するツールです。

パスワードメーター
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>パスワードメーターについて</title>
    <link rel="stylesheet" href="./main.css" />
  </head>
  <body>
    <div class="form-container">
      <label for="password">パスワード:</label>
      <input
        type="password"
        id="password"
        class="form-control"
        placeholder="パスワードを入力してください"
      />
      <div id="password_strength" class="password-strength"></div>
      <div id="strength_bar_container" class="strength-bar-container">
        <div id="strength_bar" class="strength-bar"></div>
      </div>
      <p id="strength_hint" class="strength-hint">
        8文字以上、大文字、小文字、数字、特殊文字を含むパスワードが強いです。
      </p>
    </div>

    <script src="./main.js"></script>
  </body>
</html>
// ページの読み込みが完了
document.addEventListener("DOMContentLoaded", function () {
  const passwordInput = document.getElementById("password");
  const passwordStrength = document.getElementById("password_strength");
  const strengthBar = document.getElementById("strength_bar");
  const strengthBarContainer = document.getElementById(
    "strength_bar_container"
  );

  // パスワードの強度を評価する関数
  function evaluatePasswordStrength(password) {
    let strength = 0;
    if (password.length >= 8) strength++;
    if (/[A-Z]/.test(password)) strength++;
    if (/[a-z]/.test(password)) strength++;
    if (/[0-9]/.test(password)) strength++;
    if (/[^A-Za-z0-9]/.test(password)) strength++;
    return Math.min(strength, 5); // 最大値を5に制限
  }

  // 強度に応じてメッセージとバーの色を設定する関数
  function updateStrengthDisplay(strength) {
    const messages = [
      "強度: 非常に弱い",
      "強度: 弱い",
      "強度: 中",
      "強度: 強い",
      "強度: 非常に強い",
    ];
    const colors = ["#ff4d4d", "#ff944d", "#ffcc00", "#99cc00", "#4caf50"];
    const percentages = [0, 20, 40, 60, 80, 100]; // 更新されたパーセンテージ
    passwordStrength.textContent = `${messages[strength - 1]} (${
      percentages[strength]
    }%)`;
    strengthBar.style.width = `${percentages[strength]}%`;
    strengthBar.style.backgroundColor = colors[strength - 1];
    passwordStrength.style.display = "block";
    strengthBarContainer.style.display = "block";
  }

  // イベントリスナーを追加
  passwordInput.addEventListener("input", function () {
    const password = passwordInput.value;
    if (password.length === 0) {
      passwordStrength.textContent = "";
      strengthBar.style.width = "0";
      passwordStrength.style.display = "none";
      strengthBarContainer.style.display = "none";
    } else {
      const strength = evaluatePasswordStrength(password);
      updateStrengthDisplay(strength);
    }
  });
});
.form-container {
  width: 100%;
  max-width: 500px;
  margin: 20px auto;
  padding: 30px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.form-control {
  width: calc(100% - 20px);
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  font-size: 16px;
  margin-bottom: 10px;
}

.password-strength {
  margin-top: 10px;
  padding: 5px;
  border-radius: 4px;
  text-align: center;
  font-weight: bold;
  display: none;
}

.strength-bar-container {
  width: calc(100% - 20px);
  height: 10px;
  border-radius: 4px;
  background-color: #e0e0e0;
  overflow: hidden;
  margin-top: 10px;
  display: none;
}

.strength-bar {
  height: 100%;
  width: 0;
  transition: width 0.5s;
}

.strength-hint {
  margin-top: 10px;
  font-size: 14px;
  color: #666;
}
出力結果

8文字以上、大文字、小文字、数字、特殊文字を含むパスワードが強いです。

JavaScript