Jquery is very clean and easy to integrate in web applications. To create password strength checker with jquery is simple and can be done easily. Recently , in my latest project , I have used it and liked the way it changes color.
.
Here is the DEMO
Step 1: HTML Setup
Copy the following code inside your body tag or where ever you need this checker.
1 2 3 4 5 |
Password
Type Password
|
.
Step 2: CSS Setup
Copy the following CSS code inside your stylesheet. You can change style as per your requirements.
1 2 3 4 5 |
#single_form_element{margin-top:50px;}
#single_form_element .chk_avlblty{margin: 10px 0 0 110px;width:110px;text-align:right;}
#single_form_element .strength-text{font-size:13px;font-weight:bold;}
#single_form_element .chk_avlblty span.password-strength{width:110px;-moz-border-radius:5px;-webkit-border-radius:5px;height:10px;background-color:#555;display:block;}
#single_form_element .chk_avlblty span.client-avail{display:block;}
|
.
Step 3: Javascript setup
Copy the following code inside your head tag.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
$(document).ready(function(){ $( 'input.password-box' ).live( 'keyup', function() { var howStrong = passwordStrength( $( this ).val() ); $( '.strength-text', $( this ).next() ).text( howStrong ); var sColor = '#555'; switch( howStrong ) { case 'Strong' : $( '.password-strength', $( this ).next() ).css( 'background-color', 'green' ); break; case 'Medium' : $( '.password-strength', $( this ).next() ).css( 'background-color', 'lightgreen' ); break; case 'Weak' : $( '.password-strength', $( this ).next() ).css( 'background-color', 'orange' ); break; case 'Short' : $( '.password-strength', $( this ).next() ).css( 'background-color', 'red' ); break; default : $( '.password-strength', $( this ).next() ).css( 'background-color', '#555' ); } }).focusout( function() { $( this ).trigger( 'keyup' ); });
});
|
All Done!
Check how it Looks. DEMO
Cheers!!