Password Requirements

nicky · 01-20-2009, 04:43 PM

I have this hosting application on my website and people just seem oblivious to the fact that right next to the password input it says: "requires one uppercase letter, one lowercase letter, and one number"

I've tried to take the time before to locate a script, but I've never found a good enough tutorial. Can anyone direct me to one? I appreciate it. =]

itsallkizza · 01-20-2009, 05:06 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Example</title>
<style type="text/css">
</style>
<script type="text/javascript">
// <![CDATA[

function meets_password_specifications(pass)
	{
	var lower = "abcdefghijklmnopqrstuvwxyz";
	var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var num = "0123456789";
	var has_lower = false;
	for (var i=0;i<pass.length;i++)
		{
		if (lower.indexOf(pass.charAt(i)) != -1)
			{
			has_lower = true;
			break;
			}
		}
	var has_upper = false;
	for (var i=0;i<pass.length;i++)
		{
		if (upper.indexOf(pass.charAt(i)) != -1)
			{
			has_upper = true;
			break;
			}
		}
	var has_num = false;
	for (var i=0;i<pass.length;i++)
		{
		if (num.indexOf(pass.charAt(i)) != -1)
			{
			has_num = true;
			break;
			}
		}
	return has_lower && has_upper && has_num;
	}

function onFormSubmit(form_elm)
	{
	var pass = form_elm.pass.value;
	var ok = true;
	if (!meets_password_specifications(pass)) ok = false;
	return ok;
	}

// ]]>
</script>
</head>
<body>

<form onsubmit="return onFormSubmit(this)">
	<input type="password" name="pass" /><br />
	<input type="submit" value="submit" />
</form>

</body>
</html>

I used indexof and char strings to check for the 3 specifications because it's actually faster than running toLower/UpperCase(). I also split up the 3 checks in case you want to alert the user of exactly what he did wrong. This is even faster if you don't care:

Code:

function meets_password_specifications(pass)
	{
	var lower = "abcdefghijklmnopqrstuvwxyz";
	var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var num = "0123456789";
	var has_lower=false,has_upper=false,has_num=false;
	for (var i=0;i<pass.length;i++)
		{
		var c = pass.charAt(i);
		if (!has_lower && lower.indexOf(c) != -1) has_lower = true;
		else if (!has_upper && upper.indexOf(c) != -1) has_upper = true;
		else if (!has_num && num.indexOf(c) != -1) has_num = true;
		if (has_lower&&has_upper&&has_num) return true;
		}
	return false;
	}

Philip M · 01-20-2009, 05:21 PM

Another, perhaps simpler/shorter, way:-

Code:

<script type = "text/javascript">

function chkpwd () {
//var pwd = document.formname.passwordfield.value;
var pwd = "Ab1";  // for testing purposes
if ((/[A-Z]/g.test(pwd)) && (/[a-z]/g.test(pwd)) &&  (/[0-9]/g.test(pwd)) ) {
alert ("Valid Password");
return true;
}
else {
alert ("Invalid Password!\nMust have at least one UPPERCASE letter A-Z\nand one lowercase letter a-z\nand one number 0-9.\nPlease re-enter the password.");
document.formname.passwordfield.value = "" ;  // clear password field
document.formname.passwordfield.focus(); // and refocus on it
return false;
}
}

</script>

You can test your regular expressions at: http://www.claughton.clara.net/regextester.html

itsallkizza · 01-20-2009, 06:57 PM

Ran this speed test:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Speed Test</title>
<style type="text/css">
body
{
font-size: 12px;
font-family: arial,sans-serif;
}

form
{
margin: 0;
padding: 0;
}

h2
{
margin: 0;
padding: 12px 0 0 0;
font-size: 18px;
}

.tab
{
margin-right: 20px;
}
</style>
<script type="text/javascript">
// <![CDATA[

/*Author: itsallkizza*/

function func1(pass)
	{
	return ((/[A-Z]/g.test(pass)) && (/[a-z]/g.test(pass)) &&  (/[0-9]/g.test(pass)));
	}

function func2(pass)
	{
	var lower = "abcdefghijklmnopqrstuvwxyz";
	var upper = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
	var num = "0123456789";
	var has_lower=false,has_upper=false,has_num=false;
	for (var i=0;i<pass.length;i++)
		{
		var c = pass.charAt(i);
		if (!has_lower && lower.indexOf(c) != -1) has_lower = true;
		else if (!has_upper && upper.indexOf(c) != -1) has_upper = true;
		else if (!has_num && num.indexOf(c) != -1) has_num = true;
		if (has_lower&&has_upper&&has_num) return true;
		}
	return false;
	}

function speedTest(iterations)
	{
	var f1_results = document.getElementById("f1_results"),f2_results = document.getElementById("f2_results"),status = document.getElementById("status");
	var t1,t2;
	status.innerHTML = "running";

	var passes = ["abcdefg","Abcdefg","abcDefg","abcdefG","5bcdefg","abc5efg","abcdef5"];

	t1 = (new Date()).getTime();
	for (var i=0;i<iterations;i++) func1(passes[i%passes.length]);
	t1 = (new Date()).getTime()-t1;

	t2 = (new Date()).getTime();
	for (var i=0;i<iterations;i++) func2(passes[i%passes.length]);
	t2 = (new Date()).getTime()-t2;

	status.innerHTML = "test complete";
	f1_results.innerHTML = t1;
	f2_results.innerHTML = t2;
	}

window.onload = function()
	{
	document.getElementById("function1").innerHTML = ((func1+"").replace(/\n/g,"<br />")).replace(/\t/g,'<span class="tab"></span>');
	document.getElementById("function2").innerHTML = ((func2+"").replace(/\n/g,"<br />")).replace(/\t/g,'<span class="tab"></span>');
	}

var dat = new Date();
function onFormSubmit(form_element)
	{
	var i = form_element.iterations.value*1;
	if (i && !isNaN(i)) speedTest(i);
	return false;
	}

// ]]>
</script>
</head>
<body>

<form onsubmit="return onFormSubmit(this)">
	<input type="text" name="iterations" value="25000" /><br />
	<input type="submit" value="start" /><br />
</form>

<h2>Function 1</h2>
<div id="function1"></div>

<h2>Function 2</h2>
<div id="function2"></div>

<h2>Results</h2>
<div id="results">
	<div id="status"></div>
	Function 1 Time: <span id="f1_results"></span><br />
	Function 2 Time: <span id="f2_results"></span>
</div>

</body>
</html>

Philip's is about 5x faster.

Philip M · 01-20-2009, 07:21 PM

Quote:

Originally Posted by itsallkizza

Ran this speed test:

Philip's is about 5x faster.

Surprise, surprise!

But in any case we are talking about nanoseconds. I don't think speed of execution is much of an issue these days in most situations.

nicky · 01-21-2009, 11:44 AM

Thanks a bunch! I'll have to try the scripts later. I appreciate. =]