Basic Password Strength Test (Length)

Javascript Code

+ 0 likes

Please Register to submit score.

Average Score	6.0
Scores Submitted	2
Date Added	Jul 06, 2008
Last Updated	Jul 12, 2008
Tags	dhtml javascript password strength test type update

Introduction

Live Demo!

This password strength test will display "Weak/Moderate-Weak/Moderate/Strong" it also displays a bar showing the strength.

The important thing about this Javascript, is that it displays the message as you type rather than after you hit a "Submit" button thanks to DHTML.

Copy and paste the entire HTML from below so that you get a feel for how it works, there are also edit notes in there for if you wish to use the snippet but without this HTML.

The actual script you may want to use is between the <script type="text/javascript"></script> tags. It is the 'function passwordstrength' area.

Grab the Code

<html>
<head>
<title>Password Demo</title>
<script type="text/javascript">
function passwordstrength () {
 // Replace areas in Caps in the line below with the NUMERICAL value you want to search for.
 // For example, if you want "Less than 4 characters" to be weak, replace "l=6 ;" with "l=4;"
 l=6 ; m=8 ; n=10 ;
 b=document.getElementById('Password').value ;
   if (b.length<l) {
     //You can type in whichever message you like for the below. Just edit the "Message" or "Length of Line" with the appropriate message/underscores
       c="Password Strength: <font color='red'><b>WEAK</b></font>" ;
       d="<font size='2'><font color='red'><b>_______________</b></font>" ;
    }
    else if (b.length<m) {
      c="Password Strength: <font color='#FF3300'><b>MODERATE-WEAK</b></font>" ;
      d="<font size='2'><font color='#FF3300'><b>_____________________</b></font>" ;
    }
    else if (b.length<n) {
      c="Password Strength: <font color='blue'><b>MODERATE</b></font>" ;
      d="<font size='2'><font color='blue'><b>____________________________</b></font>" ;
    }
    else {
      c="Password Strength: <font color='green'><b>STRONG</b></font>" ;
      d="<font size='2'><font color='green'><b>_____________________________________</b></font>" ;
    }
    //This area specifies which text areas the messages go to.  Replace 'Display' or 'Strength Visual' with the id of the area.
    document.getElementById('Display').innerHTML=c ;
    document.getElementById('Strength Visual').innerHTML=d ;
}
</script>
</head>
<body>

<div style="background-color:FFF5CF; position: absolute; width: 461px; height: 36px; z-index: 1; left: 15px; top: 31px" id="PassWord Field">
<div style="position: absolute; width: 272px; height: 6px; z-index: 3; left: 172px; top: 14px" id="Strength Visual">
	<font size="1"></font></div>
<div style="position: absolute; width: 271px; height: 12px; z-index: 2; left: 173px; top: 3px" id="Strength Box">
	<font id="Display" size="2">Password Strength:</font></div>
<div style="position: absolute; width: 161px; height: 11px; z-index: 1; left: 6px; top: 7px" id="EntryBox">
<input onkeypress='Javascript:passwordstrength()' type="password" id="Password"></div>
&nbsp;</div>
</body>
</html>

Comments

(10) RSS

Go to Bottom

vaseline28

Comments: 154

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 2:12 am

I'm uploading a live demo of this now, obviously the above (and the demo) have no fancy effects as you would of course need to make yours have if using this...

Live Demo

Comments: 1,369

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 3:17 am

Nice like the live demo gives those of us that dont code JavaScript a taste of it and maybe even entice us in wanting to learn a bit thanks.`-.-´

F*U*R*B*Y*

Comments: 569

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 3:44 am

Nice, but i cleared it all, click out and it still kept it as strong, there wasn't anything in it even ;)

vaseline28

Comments: 154

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 5:01 am

Thanks EL, I only started myself earlier this week.
@F^U^R^B^Y^: How did you clear it out? With backspace?

It's easily fixed, I just need to change the event, and to know what to change
onkeypress
to, I need to know what you did!

F*U*R*B*Y*

Comments: 569

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 5:47 am

onblur="FunctionToChangeToWeak('hello')"

add that to your input field....

Hawkee

Comments: 566

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 10:48 am

Your criteria isn't very good. You should consider whether the password is a word, has numbers, etc. A good password isn't just long, but should also contain a few numbers and shouldn't be in the dictionary.

vaseline28

Comments: 154

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 12:03 pm

Numbers, I'll try adding that in...

jonesy44

Comments: 1,072

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 6, 2008 12:48 pm

Great work Vaseline!

For someone who knows only the basics of JS (me) this is really helpful! To know all the getelementbyID etc.. this is an awesome example!

Thanks for uploading; keep em coming !

mountaindew

Comments: 1,640

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 7, 2008 10:51 am

Yea, include numbers and capitalization.

vaseline28

Comments: 154

Javascript Snippet: Basic Password Strength Test (Length)
Posted on Jul 12, 2008 11:45 am

@Hawkee/mountaindew:
Advanced Version << Contains your 'Better Criteria'. Length/Numbers/Capitalization
Thanks for the suggestion(s).

@Anyone else: If you're not confident with Javascript/HTML I recommend that you stick to this one though.

Basic Password Strength Test (Length)

Introduction

Grab the Code

Comments

vaseline28

My Snippet Tags

Contact

Friends (8)

Sponsors

		Caelestia.net
Last seen: Oct 06, 2008 Profile \| Website Likes (9) Friends (8) Snippets (19) Images (8) Comments Received (111) Comments Submitted (154) Forum Posts (85)