, Technology

Check Password Strength with JavaScript and Regular Expressions

Tonight I was doing some research on finding a good example of a Password Strength checker that uses JavaScript and Regular Expressions. In the application at my work, we do a post back to verify the password strength and it’s quite inconvenient for our users.

I found one example of some great Regular Expressions that look for a combination of length, characters and symbols, but the code was a little excessive for my taste and tailored for .NET. So I simplified the code.

Here’s the code. The Regular Expressions do a fantastic job of minimizing the length of the code:

<script language="javascript">
function passwordChanged() {
var strength = document.getElementById(‘strength’);
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "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="20" onkeyup="return passwordChanged();" />
<span id="strength">Type Password</span>

Thanks to Andrew Cain for getting me started!

29 Comments

  1. 1
  2. 2

    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

  3. 4

    thank god for people who can actually write a piece of code properly.
    Had same experience as Janis.

    This works right out of the box which is perfect for people like me who cant code javascript!

  4. 5
  5. 6

    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?!

  6. 7

    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.

  7. 8
  8. 9
  9. 10
  10. 11

    [email protected]$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.

  11. 12
  12. 13

    Thanks for this little code i can now use it to test my password strength when my visitors .enters their passwords,

  13. 14
  14. 15
  15. 16
  16. 17
  17. 18
  18. 19

    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..

  19. 20
  20. 21
  21. 22
  22. 23
  23. 24

    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.

    • 25

      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!

  24. 26
  25. 27
  26. 28
  27. 29

Leave a Reply