Password Strength

For example, How to make Password Strength...

Demo

HTML

<input type="password" name="pass" id="passwordInput" placeholder="Password" />
<span id="strength-password"></span>
<small class="rule">( Minimum 8 characters in length and Contains 3/4 of this require items for Uppercase Letters, Lowercase Letters, Numbers, Symbols )</small>

CSS

<style>
    small.rule { 
            font-size: 13px; 
            color:gray; 
            line-height:18px; 
            display: block; 
            padding:10px 0; 
    }
</style>

Javascript

$('#passwordInput').keyup(function(e) {
    var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
    var mediumRegex = new RegExp("^(?=.{5,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
    var enoughRegex = new RegExp("(?=.{4,}).*", "g");
    $(".rule").show();
    
    if (false == enoughRegex.test($(this).val())) {
        $('#strength-password').html('( *Too Short )').attr('style', 'color: red');
    } else if (strongRegex.test($(this).val())) {
        $('#strength-password').className = 'ok';
        $('#strength-password').html('( Strong Password! )').attr('style', 'color: green');
        $(".rule").hide();
    } else if (mediumRegex.test($(this).val())) {
        $('#strength-password').className = 'alert';
        $('#strength-password').html('( Medium! )').attr('style', 'color: orange');
    } else {
        $('#strength-password').className = 'error';
        $('#strength-password').html('( *Weak! )').attr('style', 'color: red');
    }
    return true;
});