![]() |
|
Testing password strength with Javascript - Printable Version +- Sinisterly (https://sinister.ly) +-- Forum: Design (https://sinister.ly/Forum-Design) +--- Forum: Web Design (https://sinister.ly/Forum-Web-Design) +--- Thread: Testing password strength with Javascript (/Thread-Testing-password-strength-with-Javascript) Pages:
1
2
|
Testing password strength with Javascript - Megamente - 07-25-2013 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. 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! RE: Testing password strength with Javascript - Psycho_Coder - 07-25-2013 Hey do you know how much I like these JScript and Jquery tutorials by you. Thanks for these. Tutorial tags Added RE: Testing password strength with Javascript - Megamente - 07-25-2013 (07-25-2013, 07:25 PM)Psycho_Coder Wrote: Hey do you know how much I like these JScript and Jquery tutorials by you. Thanks for these. Thank you good sir! Its a great thing to hear. :lub: I'll be posting as frequently as i can! :epic: RE: Testing password strength with Javascript - Megamente - 07-25-2013 (07-25-2013, 07:25 PM)Psycho_Coder Wrote: Hey do you know how much I like these JScript and Jquery tutorials by you. Thanks for these. Thank you good sir! Its a great thing to hear. :lub: I'll be posting as frequently as i can! :epic: RE: Testing password strength with Javascript - Megamente - 07-25-2013 (07-25-2013, 11:25 PM)Nael Wrote: Can you make a tutorial on how to run or execute that? I have no idea sorry Sure! First, copy all the content of the given code. Open a text editor (notepad for example) and paste it there. save it as mypage.html (all files type) , anywhere you like. Then just execute the file, its a web page. Make sure javascript is enabled in your browser so the code can work ![]() Let me know if this helps! RE: Testing password strength with Javascript - Megamente - 07-25-2013 (07-25-2013, 11:25 PM)Nael Wrote: Can you make a tutorial on how to run or execute that? I have no idea sorry Sure! First, copy all the content of the given code. Open a text editor (notepad for example) and paste it there. save it as mypage.html (all files type) , anywhere you like. Then just execute the file, its a web page. Make sure javascript is enabled in your browser so the code can work ![]() Let me know if this helps! RE: Testing password strength with Javascript - The Alchemist - 07-26-2013 Nice. Good to see you've added a small animation too. Uppercase, special chars, everything was considered. Cool!!! RE: Testing password strength with Javascript - The Alchemist - 07-26-2013 Nice. Good to see you've added a small animation too. Uppercase, special chars, everything was considered. Cool!!! RE: Testing password strength with Javascript - 133720 - 07-29-2013 Hello,Your script is good but i suggest you for better script Please add the min char length for better I test aA1! is medium . it normal you should add the length at least 8 length is for medium Thanks you I love your script ++ RE: Testing password strength with Javascript - Crime - 11-04-2013 (07-29-2013, 06:26 AM)133720 Wrote: Hello,Your script is good but i suggest you for better script I use a 10 character password, all different, for each account I have online. |