In this tutorial, I will teach you how to validate the password with jQuery. This method has a capability to check the strength of the input passwords. It will visually display the quality of the user’s password if it is weak, medium or strong. With this, you can measure the effectiveness of your password in multiple guessing and brute-force attacks.
Let’s begin:
- Create a landing page ang name it “index.php“.
- Create a style for the layout of the design on your page.
<style>
#pass {
padding:4px;
margin:2px;
border:solid 1px #999;
}
div {
margin-top:5px;
}
.pull-left {
float:left;
padding: 1px 7px 1px 7px;
}
</style>
- Do these following codes for the design of the page.
<!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Password Checker</title> </head> <body> <h1>Password Checker</h1> <form id="form" name="form"> <input class="pull-left" data-display="passStats" id="pass" size="20" type="password"> <div class="pull-left" id="passStats"></div> </form> </body> </html>
- Set the following jQuery plugins in the footer of your design.
<script type="text/javascript" src="jquery-2.2.4.min.js"></script> <script type="text/javascript" src="passChecker.jquery.js"></script>
- Finally, create a validation script for validating password .
<script>
$(document).ready(function(){
$('#form').submit(function(){
return false;
});
$('#pass').pStrength({
'changeBackground' : false,
'onPasswordStrengthChanged' : function(passwordStrength, strengthPercentage) {
if ($(this).val()) {
$.fn.pStrength('changeBackground', "#passStats", passwordStrength);
if (strengthPercentage >= 0 && strengthPercentage < 34 ) {
$('#' + $(this).data('display')).html('weak');
}else if (strengthPercentage >= 34 && strengthPercentage < 60 ) {
$('#' + $(this).data('display')).html('medium');
}else if (strengthPercentage >= 60 && strengthPercentage <= 100 ) {
$('#' + $(this).data('display')).html('strong');
}
} else {
$.fn.pStrength('resetStyle', "#passStats");
$('#' + $(this).data('display')).html('');
}
},
'onValidatePassword': function(strengthPercentage) {
$('#' + $(this).data('display')).html(
$('#' + $(this).data('display')).html()
);
$('#form').submit(function(){
return true;
});
}
});
});
</script>
For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :
Email – [email protected]
Mobile No. – 09305235027 – tnt
Link exchange is nothing else but it is just placing the
other person’s weblog link on your page at
suitable place and other person will also do
same in support of you.