Password Strength
Show a visual strength bar and feedback as users type their password.
Show a visual strength bar and feedback as users type their password.
function passwordStrength(pwd) {
let score = 0;
if (pwd.length >= 8) score++;
if (/[A-Z]/.test(pwd)) score++;
if (/[a-z]/.test(pwd)) score++;
if (/[0-9]/.test(pwd)) score++;
if (/[^A-Za-z0-9]/.test(pwd)) score++;
return score;
}
$("#password").on("input", function() {
const score = passwordStrength(this.value);
const labels = ["", "Very Weak", "Weak", "Fair", "Strong", "Very Strong"];
const colors = ["", "danger", "warning", "info", "primary", "success"];
const pct = score * 20;
$("#strength-bar").css("width", pct + "%").attr("class", `progress-bar bg-${colors[score]}`);
$("#strength-text").text(labels[score]);
});
Avoid revealing which rules are failing as users type — it helps attackers guess patterns.