Password Strength Meter (CSS/jQuery/JS)

Password Strength Meter

Demo | Browse Category

CSS jQuery Javascript

Wednesday, January 11, 2012 by William Thomas

Code:

function password_strength(password, strlen){

//SEARCHES FOR EACH OF THESE PATTERNS FOR VARIETY

var lo = /[a-z]+/g;
var up = /[A-Z]+/g;
var num = /[0-9]+/g;
var sym = /[^A-Za-z0-9]+/g;

//BLANK UNTIL COUNTS VARIETY AND SYMBOLS (DO NOT REMOVE)

//COUNTS SYMBOLS, USED FOR EXTRA POINTS

for(i=0; i<strlen; i++){
if(password.substr(i, 1).match(sym)){
symbols++;
}
}

var score = strlen; //POINT GIVEN FOR EVERY CHARACTER

//IF THERE ARE 3 VARIETIES, 1.5 FOR EACH & 2 FOR EACH SYMBOL

if(variety==2){
score += (variety * 1.5)+(symbols*2);
}

//IF THERE ARE >=3 VARIETIES, 1.5 FOR EACH & 3 FOR EACH SYMBOL
//BUT, IF <= 8 CHARS, ONLY 2 GIVEN FOR EACH SYMBOL

if(variety>=3){
if(strlen>=8){
score += (variety * 1.5)+(symbols*3);
} else {
score += (variety * 1.5)+(symbols*2);
}
}

var scale = 25; //MEASURES OUT OF 25 PTS, MAY BE MORE FOR SUPERSTRONG PASSWORDS
var percent = (score / scale) * 100; //GETS PERCENT OF THE SCALE

//MAY BE > 100%, THEREFORE SCALES BACK TO 100 FOR CSS PURPOSES

if(percent>100){
percent = 100;
}

//WIDTH OF THE BAR

var bar =$("#bar").width();

//WIDTH OF SHADED AREA

var shade = (percent * bar) / 100;

//GRADING JUDGMENTS & SHADE BG COLOR

if(percent<50){
var grade = "Weak";
var bg = "#e8f9ff";
}
if(percent>=50&&percent<70){
var grade = "Fair";
varbg = "#e8f9ff";
}
if(percent>=70&&percent<85){
var grade = "Good";
var bg = "#32baed";
}
if(percent>=85){
var grade = "Strong";
var bg = "#12495d";
}

//CHANGES COLOR & WIDTH OF SHADED AREA

$("#score").css({"background":bg, "width":shade+"px"});
}

else

{
$("#score").css({"background":"#ffffff", "width":"0px"});
var grade = "Password must be from 6 to 25 characters";
}
$("#grade").html(grade); //DISPLAY JUDGMENT IN HTML
}

</script>

<style>

#bar {

background: #ffffff;
border: 1px #000000 solid;
height: 10px;
width: 150px;

}
#score {

height: 10px;
width: 0;

}

</style>

</head>
<body>

Views: 34 Likes: 0 Dislikes: 0

Email:
Password:
	Keep me logged in

Email: