<html>
<head>
<style>
body
{
/*ie needs this*/
margin:0px;
padding:0px;
/*set global font settings*/
font-size:10px;
font-family:Tahoma,Verdana,Arial;
}
a:hover
{
color:#fff;
}
#user_registration
{
border:1px solid #cccccc;
margin:auto auto;
margin-top:100px;
width:400px;
}
#user_registration label
{
display: block; /* block float the labels to left column, set a width */
float: left;
width: 70px;
margin: 0px 10px 0px 5px;
text-align: right;
line-height:1em;
font-weight:bold;
}
#user_registration input
{
width:150px;
}
#user_registration p
{
clear:both;
}
#submit
{
border:1px solid #cccccc;
width:100px !important;
margin:10px;
}
h1
{
text-align:center;
}
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:20px;
background:#cccccc;
}
.strength1
{
width:30px;
background:#ff0000;
}
.strength2
{
width:40px;
background:#ff5f5f;
}
.strength3
{
width:50px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:60px;
}
.strength5
{
background:#399800;
width:70px;
}
</style>
<script>
function passwordStrength(password)
{
var desc = new Array();
desc[0] = “<span style=’color:#00FFFF;’>Weak</span>”;
desc[1] = “<span style=’color:#43C3CE;’>Better</span>”;
desc[2] = “<span style=’color:#ff0000;’>Medium</span>”;
desc[3] = “<span style=’color:#607093;’>Strong</span>”;
desc[4] = “<span style=’color:#242021;’>Strongest</span>”;
var score = 0;
//if password bigger than 6 give 1 point
if (password.length > 6) score++;
//if password has both lower and uppercase characters give 1 point
if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;
//if password has at least one number give 1 point
if (password.match(/\d+/)) score++;
//if password has at least one special caracther give 1 point
if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) ) score++;
//if password bigger than 12 give another 1 point
if (password.length > 12) score++;
document.getElementById(“passwordDescription”).innerHTML = desc[score];
document.getElementById(“passwordStrength”).className = “strength” + score;
}
</script>
</head>
<body>
<div style=”float:left; width:300px;”>
<div style=”float:left;”><input type=”password” name=”pass” id=”pass” onKeyUp=”passwordStrength(this.value)“/></div>
<div style=”float:left; width:50px;font-weight:bold; margin-left:10px;” id=”passwordDescription”></div>
</div>
</body>
</html>
