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

  • Use Markdown, and it will escape the code for you, like `<div class="cool">`.
  • Use triple-backticks for blocks of code.
    ``` 
    <div>
      <h1>multi-line block of code</h1>
      <span>be cool yo.</span>
    </div>
    ```
  • Otherwise, escape your code, like <code>&lt;div class="cool"&gt;</code>. Markdown is just easier though.

Current ye@r *

*May or may not contain any actual "CSS" or "Tricks".