Grad Assignment 4

by Larry Adams

HTML

<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>

CSS

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
html, body, ul, ol, li, form, fieldset, legend{
	margin: 0;
	padding: 0;
}

body{
	background: #CCC 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;
}

JavaScript

/*
	jQuery document ready.
*/
$(document).ready(function()
{
	/*
		assigning keyup event to password field
		so everytime user type code will execute
	*/

	$('#password').keyup(function()
	{
		$('#result').html(checkStrength($('#password').val()))
	})	
	
	/*
		checkStrength is function which will do the 
		main password strength checking for us
	*/
	
	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'
		}
	}
});