Neat Javascript/CSS real-time password strength meter

Hey all,

A while ago I saw a neat little script, which showed users the strength of their password as they entered it in, anyway, today I was looking to do something similar and decided to throw my own one together using Javascript and CSS. It works extremely well and looks great on a website. The full code display is viewable below:

all-code.jpg

As the user enters certain characters into the input box, a mini algorithm determines to strength of the password. Their are 6 states available, of which three are:

Low Password Strength

Medium Password Strength

High Password Strength

It’s all CSS/XHTML, so it will run across all browsers and it’s very easily adaptable to any platform. You may want to pull the Javascript out and place it in an external file, that is your choice.

Download the full code here

Christopher is the founder of iMod - Most of his time is spent building websites and pushing the limits with Search Engine Optimization. You can follow him on Twitter @ChristopherM

Enjoy this post? Please tell a friend:

3 Comments on "Neat Javascript/CSS real-time password strength meter"

  1. Wogan May says:

    Wow. Now there’s code I can appreciate – lean, mean, and bloat-free.

    It’s definitely the sort of thing I’ll be needing – thanks!

    ~ Wogan

  2. Chris M says:

    Sure thing bud, glad someone will make use of it :)

  3. Drum Boom says:

    Yeah! Qwerty1234567890_ it is nice, and super-secure password.

    I think that smart dictionary bruteforce attack never hack it!!! ))))

Got something to say? Go for it!