Test Password Strength using Javascript and Jquery | Sanwebcorner

Test Password Strength using Javascript and Jquery

Today i am going to tell you how to test password strength in password textbox field using Jquery. This concept will done by using simple javascript, This is one of the important concept in any forms because the password field is very important field using this password only clients they access their account so you can set this password securly, So you can set strong password with combination of letters and numbers and special characters.

Create javascript function keyup, The keyup event occurs when a keyboard key is released. The password strength message will show when key up. In javascript will write some of the condition and display the message based on those conditions. First is if the password strength is less then six characters the message is Too Short will display. Grater then six character without numbers and special character it shows weak password. If the number of characters seven and special char it shows good and then finally morethen seven char with numbers and special characters it shows strong password.You also validate the password field using password strength. So it gives the secure password to the user.

This concept is one of the userfriendly because user knows we are created password is secure or not when they fill the form itself. Below example shows to check the password strength with the help of javascript. It haves the live example and codes for your reference, I hope this post is really helpful.


Check Password strength using Jquery:

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>How to check password strength using jQuery</title>
<!--jQuery Library-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<style>
body{
background-color:#fff;
font-size: 15px;
line-height: 1.5;
font-family: 'Roboto', sans-serif;
}

a{
color:#0073BF;
text-decoration:none;
}

h2{ text-align:center; color:#fff;}

#container{
width:600px;
margin:50px auto;
background-color:#D1CECE;;
padding:30px;
color:#fff;
border: 1px solid #7F7F7F;

}

#password-strength label{
margin-right:5px;
}
#password-strength input {
padding:5px 7px;
border:1px solid #d5d9da;
box-shadow: 0 0 5px #e8e9eb inset;
width:250px;
font-size:1em;
outline:0;
margin-right:10px;
}

#password-strength{
margin-left:5px;
}

#password-strength .short{
color:#FF0000;
}

#password-strength .weak{
color:#E66C2C;
}

#password-strength .good{
color:#2D98F3;
}

#password-strength .strong{
color:#006400;
}
</style>
<script>
$(document).ready(function()
{
$('#pwd').keyup(function()
{
$('#strength_message').html(checkStrength($('#pwd').val()))
})
function checkStrength(password)
{
var strength = 0
if (password.length < 6) { 
$('#strength_message').removeClass()
$('#strength_message').addClass('short')
return 'Too short' 
}

if (password.length > 7) strength += 1
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
if (strength < 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('weak')
return 'Weak'
}
else if (strength == 2 )
{
$('#strength_message').removeClass()
$('#strength_message').addClass('good')
return 'Good'
}
else
{
$('#strength_message').removeClass()
$('#strength_message').addClass('strong')
return 'Strong'
}
}
});
</script>
</head>
<body>
<div id="container">
<h2>Password Strength Checking with jQuery</h2>
<div id="content">
<center><form id="password-strength">
<label>Password : </label>
<input name="pwd" id="pwd" type="password"/>
<span id="strength_message"></span>
</form><br/>
<a href="http://www.sanwebcorner.com">www.sanwebcorner.com</a>
</center>
</div>
<br/>
</div>
</body>
</html>

Post a Comment

Labels

360 degree view product image 3d rotate 3d text 3step-form Accordion menu ajax All Browsers Animated Background Gradient animation audio controller auto complete Best accordion menu bootstrap border bounce effect on hover Breadcrumb calculate age by dob calendar Captcha change image on mouse move color chooser countdown Counter on scroll create random number Css css animation css buttons css hover css3 customized upload Button Date picker delete data from table Different scroll speed email otp verification email verifier Embed eventlist Expanding Menu feedbck form flash news section close button full screen menu Google custom search Google Maps Google reCAPTCHA Google site search gradient hide menu Horizontal News ticker Hover Htm Html html dropdown html form html5 html5 form validation Iframe image hover increment decrement textbox value based on select box Javascript Jquery js Layered image effect on mouse hover lock & unlock page scroll marquee marquee with close button mobile number validation mobile otp login Multi-level-drop-down-menu multi-level-form Multi-Step-form mysql News ticker on hover change text to image our team page password generator password strength checker Photoshop PHP populate html selectbox Popup image on click the link pure css Question type form random number generate Random password Redirect page Based on the select box while submit the form responsive responsive menu responsive popup box Responsive Vertical Time line design rotate image selectbox based on select box simple coming soon page simple countdown based on end date simple typing effect slider sliding tab sms otp login statistic counter on scroll switch tag shape team member Time picker toggle toggle view transparent button underline animation up down slide validation vertical fixed sidebar Webtips Youtube