Validate password strength using jQuery

Validate password strength using jQuery

 

<style type="text/css">
#register {
    margin-left:100px;
}
 #register label{
    margin-right:5px;
}
 #register input {
    padding:5px 7px;
    border:1px solid #d5d9da;
    box-shadow: 0 0 5px #e8e9eb inset;
    width:250px;
    font-size:1em;
    outline:0;
}
 #result{
    margin-left:5px;
}
 #register .short{
    color:#FF0000;
}
 #register .weak{
    color:#E66C2C;
}
 #register .good{
    color:#2D98F3;
}
 #register .strong{
    color:#006400;
}
 </style>
<script type="text/javascript" src="jquery.js"></script>
<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'
    }
}
});
</script>
 <form id="register">
    <label for="password">Password:</label>
    <input name="password" id="password" type="password"/>
    <span id="result"></span>
</form>