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. Shows you 5 stages of password strength
- very weak,
- weak,
- medium,
- strong
- very strong
all calculated on your passwords characters and its length.
If you want to make a very strong password then you have add minimum 15 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:
<script type="text/javascript" src="jquery-1.8.0.min.js"></script> <script type="text/javascript" src="jquery.pwdMeter.js"></script>
jQuery to fire a call to plugin:
<script type="text/javascript">
$(document).ready(function(){
$("#password").pwdMeter();
});
</script>
This code
This code call .pwdMeter(); function on document ready trigger.
HTML Code:
<div id="grid"> <input type="password" id="password"> <span id="pwdMeter" class="neutral"></span> </div>
It will show textbox to enter password and when you enter something in password box it shows you strength in empty span.
CSS Used:
<style>
.veryweak{
color:#B40404;
}
.weak{
color:#DF7401;
}
.medium{
color:#FFFF00;
}
.strong{
color:#9AFE2E;
}
.verystrong{
color:#0B610B;
}
</style>
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>How to create Password Strength checker in jQuery | PGPGang.com</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>
<h2>How to create Password Strength checker in jQuery example. <a href="https://www.phpgang.com/">Home</a> | <a href="http://demo.phpgang.com/">More Demos</a></h2>
<div style="margin-left:auto;margin-right:auto; width:260px;"><input type="password" id="password" />
<span id="pwdMeter" class="neutral"></span></div><br />
</body>
</html>
