_Pupo - Password Strength Checker

css

.password-strength {
    label { float:left; margin-right: 15px; }
    #passstrength {
        height: 10px;
        width:310px;
        display: block;
        float:left;
        margin-top:6px;
        background-color: grey;
    }
    .ok { background-color: green !important; background-size: 100%; }
    .medium { background-image: linear-gradient(left, orange, orange 50%, transparent 50%, transparent 100%); }
    .weak { background-image: linear-gradient(left, red, red 10%, transparent 10%, transparent 100%); }
}

html

<form action="." role="form">
    <fieldset>
        <div class="form-group">
            <label for="pass">Password *</label>
            <input id="pass" type="password" class="form-control" />
        </div>
        <div class="password-strength">
            <label>Password strength</label>
            <div id="passstrength"></div>
        </div>
    </fieldset>
</form>

script

$('#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');
            $('#passstrength').removeClass();
     } else if (strongRegex.test($(this).val())) {
            //$('#passstrength').html('Strong!');
            $('#passstrength').removeClass();
            $('#passstrength').addClass('ok');
     } else if (mediumRegex.test($(this).val())) {
            //$('#passstrength').html('Medium!');
            $('#passstrength').removeClass();
            $('#passstrength').addClass('medium');
     } else {
            //$('#passstrength').html('Weak!');
            $('#passstrength').removeClass();
            $('#passstrength').addClass('weak');
     }
     return true;
});