<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Password Strength Checking with jQuery - gazpo.com</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<style rel="stylesheet" type="text/css">
html, body, ul, ol, li, form, fieldset, legend{
margin: 0;
padding: 0;
}
body{
background: url('bg.png') repeat;
font-family: 'Vollkorn', serif, Arial;
font-size: 15px;
line-height: 1.5;
}
h1, h2, h3, h4, h5, h6, p {
margin: 0;
}
p{
margin-bottom:15px;
}
a{
color:#0073BF;
text-decoration:none;
}
#container{
width:600px;
margin:0 auto;
background:#ffffff;
padding:20px;
}
#header{
text-align:center;
margin:20px 0 40px;
}
#footer{
text-align:center;
margin-top:40px;
}
#register {
margin-left:100px;
}
#register label{
margin-right:5px;
}
#register input {
padding:5px 7px;
border:1px solid #d5d9da;
box-shadow: 0 0 5px #e8e9eb inset;
width:250px;
font-size:1em;
outline:0;
}
#result{
margin-left:5px;
}
#register .short{
color:#FF0000;
}
#register .weak{
color:#E66C2C;
}
#register .good{
color:#2D98F3;
}
#register .strong{
color:#006400;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$('#password').keyup(function(){
$('#result').html(checkStrength($('#password').val()))
})
function checkStrength(password){
//initial strength
var strength = 0
//if the password length is less than 6, return message.
if (password.length < 6) {
$('#result').removeClass()
$('#result').addClass('short')
return 'Too short'
}
//length is ok, lets continue.
//if length is 8 characters or more, increase strength value
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
//now we have calculated strength value, we can return messages
//if value is less than 2
if (strength < 2 ) {
$('#result').removeClass()
$('#result').addClass('weak')
return 'Weak'
} else if (strength == 2 ) {
$('#result').removeClass()
$('#result').addClass('good')
return 'Good'
} else {
$('#result').removeClass()
$('#result').addClass('strong')
return 'Strong'
}
}
});
</script>
</head>
<body>
<div id="container">
<div id="header">
<h2>Password Strength Checking with jQuery<h2>
</div>
<div id="content">
<!-- form start-->
<form id="register">
<label for="password">Password : </label>
<input name="password" id="password" type="password"/>
<span id="result"></span>
</form>
<!-- form end-->
</div>
</div>
</body>
</html>
No comments:
Post a Comment