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.
.
Step 2: CSS Setup
Copy the following CSS code inside your stylesheet. You can change style as per your requirements.
#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.
All Done!
Check how it Looks. DEMO
Cheers!!