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

Markdown is supported in the comment area, so you can write inline code in backticks like `this` or multiline blocks of code in in triple backtick fences like ```this```. You don't need to escape code in backticks, Markdown does that for you.

Sadly, it's kind of broken. WordPress only accepts a subset of HTML in comments, which makes sense, because certainly some HTML can't be allowed, like <script> tags. But this stripping happens before the comment is processed by Markdown (via Jetpack). It seems to me that would be reversed, because after Markdown processes code in backticks, it's escaped, thus safe. If you think you can fix this issue, get in touch!

If you need to make sure the code (typically HTML) you post absolutely posts correctly, escape it and put it within <pre><code> tags.

Current ye@r *

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