パスワード入力フィールドに文字を入力するたびに、その強度を評価して表示するツールです。
パスワードメーター
<!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文字以上、大文字、小文字、数字、特殊文字を含むパスワードが強いです。