Testing password strength with Javascript 07-25-2013, 07:12 PM
#1
Hello HC!
In this post we are going to learn how to test our password strength by using javascript.
If you want to see the script in action, just Ctrl+c and Ctrl+v to a html document and voilà!
Here is the code. There are many other ways to implement it, and we can discuss them in this thread too.
Enjoy!
In this post we are going to learn how to test our password strength by using javascript.
If you want to see the script in action, just Ctrl+c and Ctrl+v to a html document and voilà!
Here is the code. There are many other ways to implement it, and we can discuss them in this thread too.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<meta http-equiv="content-language" content="en" />
<title>Password strength meter example</title>
<style>
body
{
/*ie needs this*/
margin:0px;
padding:0px;
/*set global font settings*/
font-size:10px;
font-family:Tahoma,Verdana,Arial;
}
#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:250px;
}
#user_registration p
{
clear:both;
}
#passwordStrength
{
height:10px;
display:block;
float:left;
}
.strength0
{
width:250px;
background:#cccccc;
}
.strength1
{
width:50px;
background:#ff0000;
}
.strength2
{
width:100px;
background:#ff5f5f;
}
.strength3
{
width:150px;
background:#56e500;
}
.strength4
{
background:#4dcd00;
width:200px;
}
.strength5
{
background:#399800;
width:250px;
}
</style>
<script>
function passwordStrength(password)
{
var desc = new Array();
desc[0] = "Very Weak";
desc[1] = "Weak";
desc[2] = "Better";
desc[3] = "Medium";
desc[4] = "Strong";
desc[5] = "Strongest";
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>
<form method="post" action="" id="user_registration" name="user_registration">
<h1>Password strength meter</h1>
<p>
<label for="pass">Password</label><input type="password" name="pass" id="pass" onkeyup="passwordStrength(this.value)"/>
</p>
<p>
<label for="passwordStrength">Password strength</label>
<div id="passwordDescription">Password not entered</div>
<div id="passwordStrength" class="strength0"></div>
</p>
</form>
</body>
</html>Enjoy!
Yar-har Fiddle-dee-dee, being a pirate is alright to be! Do what you want cause a pirate is free, you are a pirate! AHOY!
![[Image: tumblr_m7isvt2N171ranhnao1_500.gif]](http://25.media.tumblr.com/tumblr_m7isvt2N171ranhnao1_500.gif)
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
![[Image: OilyCostlyEwe.gif]](http://fat.gfycat.com/OilyCostlyEwe.gif)
![[Image: 2YpkRjy.png]](http://i.imgur.com/2YpkRjy.png)
![[Image: 946696_301886219956429_1080285596_n.jpg]](https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-ash3/946696_301886219956429_1080285596_n.jpg)
