Skip to content Skip to tags Skip to twitter news Skip to blog roll Skip to categories Skip to archives Skip to recent posts

December 4, 2008

12 Comments

Password Strength Indicator and Generator

by in Javascript,jQuery on December 4, 2008 @ 12:00 pm

Sometimes you want to show your user the strength of their password and although there a quite a few jQuery “plugins” that do this there are none – that I’ve found – that let you set the class of an element so that you can do a graphical representation of the strength.

What I have put together is some code that I have been using on a few projects and turned it into a rough plugin. I say a rough plugin because it is very basic and not entirely flexible; let’s just call it a proof-of-concept.

Live Demo of Password strength indicator and generator

In the example about you will see two password boxes and with them you have a generate password link and an icon showing you the strength of your password.

The first example you notice that I have a basic indicator showing the strength is the form a colors blocks going from green to red with red being the strongest indicator. (I got these images from the cpanel password changer)

This is what you would normally see and it is fine, but what if your design is much like my current design where you are featuring trees?

In the second example we simply swap out the icon for a tree that has four levels and when the password is real strong the tree is completely filled in with red.

tree strength indicator

Have a look at the code:

The Code for Password strength indicator and generator

By default the plugin will work off of ten default classes that you can set the css for which you can do an image sprite like I did above. Or maybe just a DIV with specific colors and widths that will illustrate a growing strength of a password.

Final Thoughts

The point of this post is to show you that you don’t need to limit yourself to what is already out there, expand your thinking to include all possibilities and not just prepackaged ones.

With that said, what other possibilities do we have for a simple thing like a password strength indicator? Hmm… maybe doing a meter type thing that goes from zero to a hundred and just rotate the pointer much like the clock example?

back to beginning of this post back to skip to links
Tags: ,

If you liked this article why don't you share it:

Stumble it delicious Digg it Reddit it DZone it Bump it Mixx it! Buzz up! E-mail

12 Responses to “Password Strength Indicator and Generator”

I’ve always liked these password strength indicators. Nice balance of functionality and cool design. I may try and bust this out on a little backend I’m building for a client right now.

Hey,

Great work on the plugin. When I released my one a while ago, it was very popular but this one definitely has more potential for customising the look and feel.

On this point though, we are working to create a widget for jQueryUI to handle all types of form validation, including password strength (http://jqueryui.pbwiki.com/FormValidation) and it would be great to see your input on it.

@Chris, if you don’t mind posting the style of what you will doing I would love to link to it so people can get and idea of the possibilities.

@Tane, Thanks, I’ll take a look at what you have going on at jqueryui. My original intent was to modify your plugin but could not find it for what ever reason. (at least I think it was yours but could be wrong) So I went this route as more of a POC. I will definitely take a look at what you have in the UI library.

I merged your code with some CSS from the MS Passport Registration page to only use CSS.

Here is the example: http://projects.sharkmediallc.com/pass/

Brad

@brad v
You might be interested in my code for validation rules for password strength: http://bit.ly/wRn

@tane piper I’m currently using your jQuery Password Strength Plugin v2.0 for a project and like what you are doing, but not really wanting to implement jQuery UI to show 3 strength levels of a password.

@Benjamin code might not be as robust as yours, but for me it’s the perfect blend of simple code and ability to limit the confusion on the side of the user.

I thank you both for making my job easier and taking the time to write excellent plugins.

Brad

@brad v
Good to hear you’re using it, I had just posted to code as your free to take it and do with it as you like. It hasn’t been up for a while, I may still stick it up along with the UI version. The UI version was just a test and will eventually be rolled into a whole form validation widget for jQueryUI.

@brad v, I’m glad you are finding good use for it. Will you be keeping that link up, I would like to link to it in the post?

@Benjamin, yes the link will remain up. I also included what I changed to your code on the page.

Brad

@brad v sweet, thank you

I tried ABC123 and it told me it was the best password possible. :-/

@Ben that is quite possible, the code can be vastly improved to check against multiple caps, numbers and other characters.


Learn from my mistakes, I got burnt by the flame, you don't have to.


RSS Feed Link My Hosting of Choice

64 queries. 0.345 seconds. Powered by WordPress visitor stats