SyntaxStudy
Sign Up
jQuery Intermediate 4 min read

Password Strength Meter

Password Strength

Show a visual strength bar and feedback as users type their password.

Example
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]);
});
Pro Tip

Avoid revealing which rules are failing as users type — it helps attackers guess patterns.