Password Strength with JavaScript

>> Check the strength of a password with JavaScript

RESOURCE ADDED ON TUESDAY 22 AUGUST 2006, 11:44:56

You are going to learn how to make a JavaScript password strength analyser like this.

NOTE: If you want to learn how to make the graphics in this tutorial try the Password Strength Widget tutorial for Photoshop. If you want to go straight to the complete code listing click here.

To analyse the strength of a password we need to parse the contents of a textfield every time the contents change.

For the purposes of this tutorial we'll use the following thresholds:

Too Short - less than 4 characters
Fair - less than 7 characters
Medium - 7 or more characters (characters only, no numbers)
Strong - 7 or more characters including at least 1 number

To start with let's define some CSS styles:

Code: Styles for the Tutorials

Downloads: 1153

We have an image for each strength - you can use these or create your own:

The next thing to do is to load these four images into an array so they can be displayed as and when we need them - we simply create four Image objects and define the src attribute.

Code: Preload Images into Array

    var minpwlength = 4;
    var fairpwlength = 7;

    var STRENGTH_SHORT = 0;  // less than minpwlength
    var STRENGTH_WEAK = 1;  // less than fairpwlength
    var STRENGTH_FAIR = 2;  // fairpwlength or over, no numbers
    var STRENGTH_STRONG = 3; // fairpwlength or over with at least one number

    img0 = new Image();
    img1 = new Image();
    img2 = new Image();
    img3 = new Image();

    img0.src = 'images/tooshort.jpg';
    img1.src = 'images/fair.jpg';
    img2.src = 'images/medium.jpg';
    img3.src = 'images/strong.jpg';

    var strengthlevel = 0;

    var strengthimages = Array( img0.src,
                                img1.src,
                                img2.src,
                                img3.src );

Downloads: 914

The first function we'll need to write is one that checks if the password is too small - it's simple - it just checks the length of the string:

Code: Is Too Small

    function istoosmall( pw ) {

        if( pw.length < minpwlength ) {

            return true;

        }
        else {

            return false;

        }

    }

Downloads: 362

If it's not too small we need to check if it constitutes fair, i.e. 4 - 6 characters (it works in the same way as the previous function).

Code: Is Fair

    function isfair( pw ) {

        if( pw.length < fairpwlength ) {

            return false;

        }
        else {

            return true;

        }

    }

Downloads: 299

Then we need to check for at least one number - if it has a number it's strong, if it hasn't it's fair. We use the charAt() function to loop through each of the characters and then use isNaN to find out if the current character is an integer.

Code: hasnum Function

    function hasnum( pw ) {

        var hasnum = false;

        for( var counter = 0; counter < pw.length; counter ++ ) {

            if( !isNaN( pw.charAt( counter ) ) ) {

                hasnum = true;

            }

        }


        return hasnum;

    }

Downloads: 385

Now we need a function to manage the previous three - this next function is called every time they key is pressed:

Code: Update Strength

    function updatestrength( pw ) {

        if( istoosmall( pw ) ) {

            strengthlevel = STRENGTH_SHORT;

        }
        else if( !isfair( pw ) ) {

            strengthlevel = STRENGTH_WEAK;

        }
        else if( hasnum( pw ) ) {

            strengthlevel = STRENGTH_STRONG;

        }
        else {

            strengthlevel = STRENGTH_FAIR;

        }

        document.getElementById( 'strength' ).src = strengthimages[ strengthlevel ];

    }

Downloads: 326

And here are the contents of the body tag:

Code: The Body Tag contents for the tutorial

<body onload="document.getElementById( 'password' ).focus();">
<div>Enter your password here:</div>
<br />
<div>
<input maxlength="15" onkeyup="updatestrength( this.value );" type="password" name="password" id="password" value="" />
<img src="images/tooshort.jpg" id="strength" alt="" />
</div>
</body>

Downloads: 342

And here's the complete working code:

Code: Password Strength Complete Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Password Strength</title>
<script language="javascript" type="text/javascript">

    var minpwlength = 4;
    var fairpwlength = 7;

    var STRENGTH_SHORT = 0;  // less than minpwlength
    var STRENGTH_WEAK = 1;  // less than fairpwlength
    var STRENGTH_FAIR = 2;  // fairpwlength or over, no numbers
    var STRENGTH_STRONG = 3; // fairpwlength or over with at least one number

    img0 = new Image();
    img1 = new Image();
    img2 = new Image();
    img3 = new Image();

    img0.src = 'images/tooshort.jpg';
    img1.src = 'images/fair.jpg';
    img2.src = 'images/medium.jpg';
    img3.src = 'images/strong.jpg';

    var strengthlevel = 0;

    var strengthimages = Array( img0.src,
                                img1.src,
                                img2.src,
                                img3.src );

    function updatestrength( pw ) {

        if( istoosmall( pw ) ) {

            strengthlevel = STRENGTH_SHORT;

        }
        else if( !isfair( pw ) ) {

            strengthlevel = STRENGTH_WEAK;

        }
        else if( hasnum( pw ) ) {

            strengthlevel = STRENGTH_STRONG;

        }
        else {

            strengthlevel = STRENGTH_FAIR;

        }

        document.getElementById( 'strength' ).src = strengthimages[ strengthlevel ];

    }

    function isfair( pw ) {

        if( pw.length < fairpwlength ) {

            return false;

        }
        else {

            return true;

        }

    }

    function istoosmall( pw ) {

        if( pw.length < minpwlength ) {

            return true;

        }
        else {

            return false;

        }

    }

    function hasnum( pw ) {

        var hasnum = false;

        for( var counter = 0; counter < pw.length; counter ++ ) {

            if( !isNaN( pw.charAt( counter ) ) ) {

                hasnum = true;

            }

        }


        return hasnum;

    }

</script>
<style media="all" type="text/css">

    body {

        background-color: #858585;
        color: #EEEEEE;
        font-family: Tahoma, sans-serif;
        font-size: 11px;

    }

    input {

        background-color: #EEEEEE;
        border: 1px solid #333333;
        color: #333333;
        font-family: Tahoma, sans-serif;
        font-size: 11px;
        margin-bottom: 20px;

    }

</style>
</head>
<body onload="document.getElementById( 'password' ).focus();">
<div>Enter your password here:</div>
<br />
<div>
    <input maxlength="15" onkeyup="updatestrength( this.value );" type="password" name="password" id="password" value="" />
    <img src="images/tooshort.jpg" id="strength" alt="" />
</div>
</body>
</html>

Downloads: 2951

This resource has been viewed 19622 times.

Back to Resources

Back to Tutorials

Back to Web Clientside

Support Dr Quincy

These resources are provided free of charge. If, however, you would like to make a donation to help finance these resources, no matter how big or small, please use the PayPal button below.

Credits

This resource was written by Tim Bennett Bsc (Hons). Tim Bennett has a First Class Degree in Multimedia Systems Computing from Leeds Metropolitan University. He works as a freelance multimedia developer under the company name Texelate creating free and commissioned high-quality multimedia solutions. Find out more by visiting the portfolio section and viewing his blog. If you'd like to request a resource get in touch!

Rate this Resource

Click on the appropriate star below to rate this resource:

Num votes: 831

Average: 4.3 / 10

Comments

It only checks the char number. So, it doesn't work much. It should check if the symbols are more like random or they form a word or something close.
Example: y7en89d41v and abcdefghij doesn't have the same password strength

That one commented on 24/12/2007, 14:38:39

Great work

VBS commented on 05/12/2007, 10:53:06

Aweseom thing man!

Anonymous commented on 21/11/2007, 13:19:24

this
is really
greate...and powerfully.... thankyou , really thank you...

amir commented on 02/09/2007, 18:32:05

Should also check for upper case and alphanumeric

dan commented on 08/06/2007, 16:56:55