Check Password Strength with JavaScript and Regular Expressions
I was doing some research on finding a good example of a Password Strength checker that uses JavaScript and Regular Expressions (Regex). In the application at my work, we do a post back to verify the password strength and it’s quite inconvenient for our users.
What is Regex?
A regular expression is a sequence of characters that define a search pattern. Usually, such patterns are used by string searching algorithms for find or find and replace operations on strings, or for input validation.
This article is definitely not to teach you regular expressions. Just know that the ability to use Regular Expressions will absolutely simplify your development as you search for patterns in text. It’s also important to note that most development languages have optimized regular expression use… so rather than parsing and searching strings step-by-step, Regex is typically much faster both server and client-side.
I searched the web quite a bit before I found an example of some great Regular Expressions that look for a combination of length, characters, and symbols. Howver, the code was a little excessive for my taste and tailored for .NET. So I simplified the code and put it in JavaScript. This makes it validate the password strength in real-time on the client’s browser before posting it back… and provides some feedback to the user on the password’s strength.
Type A Password
With each stroke of the keyboard, the password is tested against the regular expression and then feedback is provided to the user in a span beneath it.
Type Password
Here’s the Code
The Regular Expressions do a fantastic job of minimizing the length of the code:
- More characters – If the length is under 8 characters.
- Weak – If the length is less than 10 characters and doesn’t contain a combination of symbols, caps, text.
- Medium – If the length is 10 characters or more and has a combination of symbols, caps, text.
- Strong – If the length is 14 characters or more and has a combination of symbols, caps, text.
<script language="javascript">
function passwordChanged() {
var strength = document.getElementById('strength');
var strongRegex = new RegExp("^(?=.{14,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{10,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{8,}).*", "g");
var pwd = document.getElementById("password");
if (pwd.value.length == 0) {
strength.innerHTML = 'Type Password';
} else if (false == enoughRegex.test(pwd.value)) {
strength.innerHTML = 'More Characters';
} else if (strongRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:green">Strong!</span>';
} else if (mediumRegex.test(pwd.value)) {
strength.innerHTML = '<span style="color:orange">Medium!</span>';
} else {
strength.innerHTML = '<span style="color:red">Weak!</span>';
}
}
</script>
<input name="password" id="password" type="text" size="15" maxlength="100" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>Hardening Your Password Request
It’s essential that you don’t just validate the password construction within your Javascript. This would enable anyone with browser development tools to bypass the script and use whatever password they’d like. You should ALWAYS utilize a server-side check to validate the password strength before storing it in your platform.
I found another password strength checkers. Their algorithm based on words dictionary. Try one at microsoft.com – http://www.microsoft.com/protect/yourself/password/checker.mspx and one at itsimpl.com – http://www.itsimpl.com
THANK YOU! THANK YOU! THANK YOU! I’ve been fooling around for 2 weeks with damn password strength code from other websites and pulling my hair out. Yours is short, works just like I want and best of all, easy for a javascript novice to modify! I wanted to capture the strength verdict and not let the form post to actually update the user’s password unless it met the strength test. Other people’s code was too complicated or didn’t work right or something else. I love you! XXXXX
You’re welcome! You’re welcome! You’re welcome!
I love you, too!
Thank you for writing a piece of code that does exactly what it says on the can!
Hi,first of all thanks alot for ur efforts,I tried to use this with Asp.net but didn’t work,i’m using
instead of tag,and it didn’t work,any suggestions?!
To Nisreen: the code in the highlighted box doesn’t work with a cut’n’paste. The single quote is messed up. The demonstration link’s code is fine though.
Hey, I like your script! I translated it into dutch, and I posted it at my forum here!
great job! exactly how it should be done on the client
very nice job….
Thanks Douglas, I use it for my current job.
“P@s$w0rD” shows at strong, although it would be cracked fairly quickly with a dictionnary attack…
To deploy such a feature on a professionnal solution, I believe it is important to combine this algorithm with a dictionnary check.
Works great in XULRunner with a little altering around. Thanks!
Thanks for this little code i can now use it to test my password strength when my visitors .enters their passwords,
Great piece of coding
The script was super .I had used in our current project
Thank you for sharing!
So simple and fantastic expression. I as a tester derived my TCs from this expression.
Thank you for sharing. You have a few broken links on this page. FYI.
can somebody tell, why it did not work mine..
i copied all the code, and paste it to notepad++ , but it does not work at all ?
please help me..
Fantastic!!!!! Thank you.
Great job guy! Simple and effective. Thank you so much for sharing!
thank you
Good, thx. But… What’s an example of a STRONG pw? ‘can’t find one!-{}
This type of “strength checker” leads people down a very dangerous path. It values character diversity over passphrase length, leading it to rate shorter, more diverse passwords as stronger than longer, less diverse passwords. That is a fallacy that will get your users into trouble if they ever face a serious hacking threat.
I don’t disagree, Jordan! The example was simply put out as an example of the script. My recommendation for people is to utilize a password management tool to create independent passphrases for any site that are unique to it. Thanks!
thanks it works great.
Thank u its working fine
am really appreciate you am searched this many times but lastly I got your post and am really amzed. THANKYOU
Thanks mate. Just deployed on my website and it is working very well.
Love hearing that! You’re most welcome!
I appreciate you sharing! Have been looking to beef up the password strength on our website and this one worked the way I wanted. Thank you so much!
Thanks, hope you’re able to customize it as needed.
You are a live saver! I was parsing strings left right and centre and thought there is a better way and found your piece of code using Regex. Was able to tinkle with it for my site…You have no idea how much this helped. Thanks so much Douglas!!
Great to hear!