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.