Create password strength checker using Jquery – This is very helpful for who wants to generate very strong password in their account like facebook or gmail. So i have develop the simple password strength checker application using jquery. If you have create the strong password, you have escaping from hackers, suppose you are build the weak password then the hackers are easily identify your password.
If you want to make a very strong password then you have add minimum 13 digit contain numbers, latter, dollar signs and capital latter generate a good and secure password.
Create password strength checker using Jquery
I have used some Jquery plugins used to check the password strength. This is the simple plugin and you have easily devlop and customized your plugin as you want like. Then you have also add some HTML, JScript code and AngularJS, its helps to implement the client side design
These below two plugins are i have used in this project,
|
1 2 |
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.pwdMeter.js"></script> |
Password strength checker code
This is some of code to be check the password strength through jquery coding. Here i have used simple line of code used and execute the password strength.
|
1 2 3 4 5 6 7 |
<script type="text/javascript"> $(document).ready(function(){ $("#password").pwdMeter(); }); </script> |
Embedded with HTML code
Now just i have embedded the Jquery code in HTML and implement the some code for designing and executing the script of entire jquery code.
|
1 2 3 4 |
<div id="grid"> <input type="password" id="password"> <span id="pwdMeter" class="neutral"></span> </div> |
This code will show the textbox to enter password and when you enter something in password field it shows you strength or weak.
Include CSS code to decorate webpage
Build some CSS code to look beautiful design for password sytem, its attract for each and every users to use repeatly in your site.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style> .veryweak { color:#B40404; } .weak { color:#DF7401; } .medium { color:#FFFF00; } .strong { color:#9AFE2E; } .verystrong { color:#0B610B; } <style> |
In CSS code to build some of classes in password checker application.
Entire code in password strength
The full of code will be embedded in jquery library. Here we have add some HTML and CSS files to integrate the jquery plugins. If you want to modify the same plugin as you want like, execute the script.
|
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 32 33 34 35 36 37 |
<html> <head> <title>Create password strength checker using jQuery</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> <script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.pwdMeter.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#password").pwdMeter(); }); </script> <style> .veryweak{ color:#B40404; } .weak{ color:#DF7401; } .medium{ color:#FFFF00; } .strong{ color:#9AFE2E; } .verystrong{ color:#0B610B; } </style> </head> <body> <h2Create password strength checker using jQuery&nbsp;&nbsp;&nbsp; <a href="http://www.vetbossel.in/">Home</a> | <a href="http://demos.vetbossel.in/">More Demos</a></h2> <div style="margin-left:auto;margin-right:auto; width:260px;"><input type="password" id="password" />&nbsp; <span id="pwdMeter" class="neutral"></span></div><br /> </body> </html> |
we hope you have understand how to develop password strength checker, or still struggling to develop password strength application feel free to comment below.