Password Strength Checker is an important plugin that can be implemented within the signup form of a website. The Password Strength Checker helps the user to identify the intensity of the entered password whether it is weak or strong, and if it is weak then the individual user needs to modify it and make it stronger.It is always advisable to have a strong password as we know that having a weak or common password can lead to a security breach and someone can easily hack into our account by breaking down the weak password.
In order to calculate the Password Strength, it is checked against several different aspects, for example, whether the password contains special characters or not, what is the length of the password it should always be more than at least 5 characters, whether there is a capital letter as well in the password or not and one thing more whether the entered password is alpha-numeric or not. All these points are tested against and if all these points are taken care off then it is damn sure that the entered password is Strong enough to secure your account.
The Code Snippet that I am going to show you guys today is very simple and easy to implement and It is also very easy to understand.
Let us get started:
1. index.html page:
<!DOCTYPE HTML>
<html>
<head>
<title>Password strength checker in HTML and JQuery</title>
<!-- Adding the required jQuery Library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<!-- Our CSS file to handle the designing of the webpage-->
<link rel="stylesheet" href="passwordscheck.css" />
<!-- This is our jquery file that is containing the code for calculating Password Strength-->
<script src="passwordscheck.js"></script>
</head>
<body>
<div id="container">
<div id="header">
<h2>Password Strength Checking with jQuery</h2>
<hr>
</div>
<div id="content">
<form id="register">
<label for="password"><b>Password : </b></label>
<input name="password" id="password" type="password" placeholder="Type Your Password here"/>
<!--In this span the password Strength will be displayed-->
<span id="result"></span>
</form>
</div>
</div>
</body>
</html>
2. passwordscheck.js:
$(document).ready(function() {
//calling a function on the keyup event of the password input field
$('#password').keyup(function() {
/*as result is the span where we will be showing the password strength, we are appending the result by calling .html and inside it, we are calling our checkStrength function and password value as the parameter.*/
$('#result').html(checkStrength($('#password').val()))
})
//this is function which is checking the password Strength
function checkStrength(password) {
var strength = 0
if (password.length < 6) {
$('#result').removeClass()
//here we are adding CSS classes as per the Password Length and returning a String Value
$('#result').addClass('short')
return 'Too short'
}
if (password.length > 7)
strength += 1
// If password contains both lower and uppercase characters, increase strength value.
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))
strength += 1
// If it has numbers and characters, increase strength value.
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))
strength += 1
// If it has one special character, increase strength value.
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))
strength += 1
// If it has two special characters, increase strength value.
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/))
strength += 1
// Calculated strength value, we can return messages
// If value is less than 2
if (strength < 2) {
$('#result').removeClass()
//here we are adding CSS classes as per the Strength Value and returning a String Value
$('#result').addClass('weak')
return 'Weak'
}
else if (strength == 2) {
$('#result').removeClass()
//here we are adding CSS classes as per the Strength Value and returning a String Value
$('#result').addClass('good')
return 'Good'
}
else {
$('#result').removeClass()
//here we are adding CSS classes as per the Strength Value and returning a String Value
$('#result').addClass('strong')
return 'Strong'
}
}
});
3. passwordscheck.css:
Simple CSS rules for our WebPage:
body{
margin: 0;
padding: 0;
font-family: "Times New Roman", Times, serif;
font-size: 15px;
line-height: 2.0;
}
#container {
width: 535px;
background: #ffffff;
padding: 20px;
margin: 90px auto;
border-radius: 5px;
height: 150px;
border: 2px solid gray;
}
#header {
text-align: center;
background-color: #FEFFED;
border-radius: 5px;
margin: -39px -20px 10px -20px;
}
h2{
padding-top: 10px;
}
#content {
margin-left: 57px;
margin-top: 40px;
}
#register label{
margin-right:5px;
}
#register input
{
padding: 5px 14px;
border: 1px solid #d5d9da;
box-shadow: 0 0 9px #0E34F5 inset;
width: 272px;
font-size: 1em;
height: 25px;
}
/*The CSS classes that we added using Jquery are defined from here on*/
#register .short
{
font-weight:bold;
color:#FF0000;
font-size:larger;
}
#register .weak
{
font-weight:bold;
color:orange;
font-size:larger;
}
#register .good
{
font-weight:bold;
color:#2D98F3;
font-size:larger;
}
#register .strong
{
font-weight:bold;
color: limegreen;
font-size:larger;
}
ScreenShot:
 |
| As per our code logic if Password Length is shorter than 6 then Too short will be displayed. |
 |
| I Entered a Stong Password, therefore, it is showing Strong. |
Try to check all the possibilities by entering weaker passwords and passwords without any number or special characters. It is always a good practice to add this Password Strength Checking Plugin on the Website as it gives User a satisfaction that the entered password is a strong one.
Source: FormGet
No comments:
Post a Comment
Thanks for Your Time!