January 28, 2014 7:55 am

How to create Password Strength checker in jQuery

This tutorial show you how to create password strength checker and its very important for your website to have some password checking on signup pages to force your users to enter a strong password. This example shows you five stages of password strength very weak, weak, medium, strong and very strong all calculated on your passwords characters and its length.

How to create Password Strength checker in jQuery

If you want to make a very strong password then you have add minimum 13 digit contain numbers, latter, signs and capital latter then it will be a good and secure password.

To perform this implementation there is many plugins in jQuery but as we have to give you an easiest  solution so I have found this plugin pwdMeter and used this plugin.

jQuery and pwdMeter include:

jQuery to fire a call to plugin:

This code call .pwdMeter(); function on document ready trigger.

HTML Code:

It will show textbox to enter password and when you enter something in password box it shows you strength in empty span.

CSS Used:

In CSS we have few classes on password strength change we append class to change color of text.

Final Code all together:

Complete password strength checker

I hope you like this tutorial please write down your reviews in comments.

Author Huzoor Bux

I am Huzoor Bux from Karachi (Pakistan). I have been working as a PHP Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically I am a PHP developer but now days exploring more in HTML5, CSS and jQuery libraries.


Tutorial Categories:
  • YO

    pakkao

  • Rıza Han Yılmaz

    Thank you for this very nice project.