Hello Reader's! In this blog i will show you how to Check password strength and its very important for your website to have some password checking on signup pages to force your users to enter a strong password. If you want to make your password very strong then you have to add minimum 13 digit which 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 we are using pwdMeter plugin here.
first you need to include pwdMeter library in your page.you can find Attached file below
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="jquery.pwdMeter.js"></script>
call .pwdMeter(); function on document ready trigger before </head> tag in your page
<script type="text/javascript">
$(document).ready(function(){
$("#password").pwdMeter();
});
</script>
CSS for your message
<style>
body {
background-color: #FFFAFA;
}
.tb8 {
width: 230px;
height: 30px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.veryweak{
color:#660000;
}
.weak{
color:#660000;
}
.medium{
color:#666600;
}
.strong{
color:#0f8a0f;
}
.verystrong{
color:#0f8a0f;
}
</style>
Now create the password text box and when you enter something in password box it shows you strength.
<div style="margin-left:auto;margin-right:auto; width:500px;">
<h2>How to Check Password Strength </h2></br></br>
Password: <input type="password" id="password" class="tb8" name="password" value="" placeholder="Enter your Password"/>
<span id="pwdMeter" class="neutral"></span></br></br>
<span>Example: Rafi@123</span>
</div><br />
Final Code all together: index.php
<!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>Password Strength checker</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>
body {
background-color: #FFFAFA;
}
.tb8 {
width: 230px;
height: 30px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
.veryweak{
color:#660000;
}
.weak{
color:#660000;
}
.medium{
color:#666600;
}
.strong{
color:#0f8a0f;
}
.verystrong{
color:#0f8a0f;
}
</style>
</head>
<body>
<div style="margin-left:auto;margin-right:auto; width:500px;">
<h2>How to Check Password Strength </h2></br></br>
Password: <input type="password" id="password" class="tb8" name="password" value="" placeholder="Password"/>
<span id="pwdMeter" class="neutral"></span></br></br>
<span>Example: Rafi@123</span>
</div><br />
</body>
</html>
I hope you like this please feel free to comment.
0 Comment(s)