Checking Password Strength Using Simple Jquery

Download Coding : Password Strength

Index :

<div class="container">

<h2>Checking Password Strength with jQuery</h2>

<form id="main">
        <label for="password">Password : </label>
        <input name="password"  id="password" type="password" class="text"/>&nbsp;&nbsp;
        <span id="result"></span>
</form> 

</div>

Style :

.container
{
    border:0 solid red;
    border-radius:15px;
    width:36%;
    margin:7% auto;
    box-shadow: inset 0 0 4px 4px #CCC; 
    padding:19px 10px;
    color:#060;
}
#main
{
    border:0 solid red;
    width:80%;
    margin:6% auto;
    color:#060; 
}
input[type=password]
{
    border-radius:15px;
    box-shadow: 0 0 2px 2px #CCC;
   -moz-box-shadow:  0 0 2px 2px #CCC;
   -webkit-box-shadow:  0 0 4px 4px #CCC;   
   -0-box-shadow:  0 0 4px 4px #CCC;    } 

Script :

$(document).ready(function() {

    $('#password').keyup(function(){
        $('#result').html(checkStrength($('#password').val()))
    })  
    
    function checkStrength(password){
    
    //initial strength
    var strength = 0
    
    //if the password length is less than 6, return message.
    if (password.length < 6) { 
        $('#result').removeClass()
        $('#result').addClass('short')
        return 'Too short' 
    }
    
    //length is ok, lets continue.
    
    //if length is 8 characters or more, increase strength value
    if (password.length > 7) strength += 1
    
    //if password contains both lower and uppercase characters, increase strength value
    if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
    
    //if it has numbers and characters, increase strength value
    if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
    
    //if it has one special character, increase strength value
    if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
    
    //if it has two special characters, increase strength value
    if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
    
    //now we have calculated strength value, we can return messages
    
    //if value is less than 2
    if (strength < 2 ) {
        $('#result').removeClass()
        $('#result').addClass('weak')
        return 'Weak'           
    } else if (strength == 2 ) {
        $('#result').removeClass()
        $('#result').addClass('good')
        return 'Good'       
    } else {
        $('#result').removeClass()
        $('#result').addClass('strong')
        return 'Strong'
    }
}
});