Treehouse: Grow your CSS skills. Land your dream job.

Last updated on:

Password Strength

$('#pass').keyup(function(e) {
     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");
     if (false == enoughRegex.test($(this).val())) {
             $('#passstrength').html('More Characters');
     } else if (strongRegex.test($(this).val())) {
             $('#passstrength').className = 'ok';
             $('#passstrength').html('Strong!');
     } else if (mediumRegex.test($(this).val())) {
             $('#passstrength').className = 'alert';
             $('#passstrength').html('Medium!');
     } else {
             $('#passstrength').className = 'error';
             $('#passstrength').html('Weak!');
     }
     return true;
});

Assumes this HTML:

<input type="password" name="pass" id="pass" />
<span id="passstrength"></span>

Comments

  1. begun
    Permalink to comment#

    example please!

  2. amine
    Permalink to comment#

    didn’t work !

  3. Brad
    Permalink to comment#

    Worked fine for me, and is a very good discerning script

  4. Permalink to comment#

    @Amine : To get it working you just have to paste the code after the closing tag

    Thanks for the snippet

  5. Permalink to comment#

    Not work for me
    how I put the js codes into html file?

  6. David
    Permalink to comment#

    This code snippet works great! Here is the simple code in action: http://jsfiddle.net/9SUWP/

  7. Permalink to comment#

    must be use this js with above codes

  8. Permalink to comment#

    script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js”>

  9. Ronan
    Permalink to comment#

    Cool snippet. :)

  10. Really usefully snippet , pity I only saw it now as I could of used for a recent project I completed. Next time!

  11. Permalink to comment#

    Best Example. Thanks for share code. I send additional css code for your example, and changed to take the js code as follows:
    CSS:

    .passstrength {

    border: 1px solid #D7D7D7;

    background-color: #eaeaea;

    font-size: 9px;

    vertical-align: middle;

    display: inline-block;

    margin-top: 5px;

    }

    .passstrength.error {

    border: 1px solid #ff6161;

    background-color: #ff7575;

    }

    .passstrength.alert {

    border: 1px solid #ffc937;

    background-color: #ffde5a;

    }

    .passstrength.ok {

    border: 1px solid #4bb12c;

    background-color: #57c435;

    }

    JS:

    $(‘#pass’).keyup(function(e) {

    if (false == enoughRegex.test($(this).val())) {

    $(this).next(‘.passstrength’).html(”);

    } else if (strongRegex.test($(this).val())) {

    $(this).next(‘.passstrength’).attr(‘class’,’passstrength’);

    $(this).next(‘.passstrength’).addClass(‘ok’);

    $(this).next(‘.passstrength’).html(‘Strong!’);

    } else if (mediumRegex.test($(this).val())) {

    $(this).next(‘.passstrength’).attr(‘class’,’passstrength’);

    $(this).next(‘.passstrength’).addClass(‘alert’);

    $(this).next(‘.passstrength’).html(‘Medium!’);

    } else {

    $(this).next(‘.passstrength’).attr(‘class’,’passstrength’);

    $(this).next(‘.passstrength’).addClass(‘error’);

    $(this).next(‘.passstrength’).html(‘Weak!’);

    }

    });

  12. Permalink to comment#

    $(‘#pass’).keyup(function(e) {

    if (false == enoughRegex.test($(this).val())) {

    $(‘.passstrength’).html(”);

    } else if (strongRegex.test($(this).val())) {

    $(‘.passstrength’).attr(‘class’,’passstrength’);

    $(‘.passstrength’).addClass(‘ok’);

    $(‘.passstrength’).html(‘Strong!’);

    } else if (mediumRegex.test($(this).val())) {

    $(‘.passstrength’).attr(‘class’,’passstrength’);

    $(‘.passstrength’).addClass(‘alert’);

    $(‘.passstrength’).html(‘Medium!’);

    } else {

    $(‘.passstrength’).attr(‘class’,’passstrength’);

    $(‘.passstrength’).addClass(‘error’);

    $(‘.passstrength’).html(‘Weak!’);

    }

    });

  13. Permalink to comment#

    Nice script. Just what I was looking for. I made a small tweak so I had a more obvious notification to the user, and simplified as there was only minimum characters needed for my script.

    http://jsfiddle.net/Xt9yG/

    Thanks again for the script.

  14. nicola
    Permalink to comment#

    why return true? why not false?
    Can we return $(this) to allow chainning?

Leave a Comment

Posting Code

We highly encourage you to post problematic HTML/CSS/JavaScript over on CodePen and include the link in your post. It's much easier to see, understand, and help with when you do that.

Markdown is supported, so you can write inline code like `<div>this</div>` or multiline blocks of code in in triple backtick fences like this:

```
<script>
  function example() {
    element.innerHTML = "<div>code</div>";
  }
</script>
```