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. User Avatar
    begun
    Permalink to comment#

    example please!

    • User Avatar
      Haydn B
      Permalink to comment#

      Just stick it into dreamweaver and run it! … or even Notepad :)

  2. User Avatar
    amine
    Permalink to comment#

    didn’t work !

  3. User Avatar
    Brad
    Permalink to comment#

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

  4. User Avatar
    Orion
    Permalink to comment#

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

    Thanks for the snippet

  5. User Avatar
    Saadulla
    Permalink to comment#

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

  6. User Avatar
    David
    Permalink to comment#

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

  7. User Avatar
    Saadulla
    Permalink to comment#

    must be use this js with above codes

  8. User Avatar
    Saadulla
    Permalink to comment#

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

  9. User Avatar
    Ronan
    Permalink to comment#

    Cool snippet. :)

  10. User Avatar
    Thomas Kroell

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

  11. User Avatar
    JUN
    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. User Avatar
    JUN
    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. User Avatar
    Paul
    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. User Avatar
    nicola
    Permalink to comment#

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

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag