(Apologies for the format of this post)
(Feel free to use this, but if you do please let me know)
The other day I registered a friend with MSN Messenger and was impressed by their password strength indicator. Today I decided to implement my own. The results are below.
Basically I use a regular expression to evaluate the strength of the password. Weak = 6 characters at least, Medium = a combination of characters, and numbers, Strong = combination of characters, numbers, and special characters.
The JavaScript is:
<script language="javascript">
var ieDOM = false, nsDOM = false;
var stdDOM = document.getElementById; function initMethod()
{
//Determine the browser support for the DOM
if( !stdDOM )
{
ieDOM = document.all;
{
nsDOM = ((navigator.appName.indexOf('Netscape') != -1) && (parseInt(navigator.appVersion) ==4));
}
}
passwordChanged();
}
{
if (stdDOM) return document.getElementById(objectId);
if (ieDOM) return document.all[objectId];
if (nsDOM) return document.layers[objectId];
}
{
if (nsDOM) return getObject(objectId);
return obj.style;
}
{
showCell(objectId, "#E2E2E2", "#E2E2E2");
}
{
getObjectStyle(objectId).color = foreColor;
getObjectStyle(objectId).backgroundColor = backColor;
}
{
showCell("pwWeak", "Black", "#FF6666");
showDefault("pwStrong");
}
{
showCell("pwWeak", "#FFCC66", "#FFCC66");
showCell("pwMedium", "Black", "#FFCC66");
showDefault("pwStrong");
}
{
showCell("pwWeak", "#80FF80", "#80FF80");
showCell("pwMedium", "#80FF80", "#80FF80");
showCell("pwStrong", "Black", "#80FF80");
}
{
showDefault("pwWeak");
showDefault("pwMedium");
showDefault("pwStrong");
}
function passwordChanged()
{
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
var pwd = getObject("txtPassword").value;
if( false == enoughRegex.test(pwd) )
{
showUndetermined();
}
else if( strongRegex.test(pwd) )
{
showStrong();
}
else if( mediumRegex.test( pwd ) )
{
showMedium();
}
else
{
showWeak();
}
}
</script>
The password strength indicator table is:
<TABLE style="BORDER-RIGHT: black thin solid; BORDER-TOP: black thin solid; FONT-SIZE: 75%; BORDER-LEFT: black thin solid; BORDER-BOTTOM: black thin solid"
cellSpacing="0" cellPadding="0" width="100%">
<TR>
<TD id="pwWeak" style="BORDER-RIGHT: black thin solid" align="center" width="34%" title="Has at least six characters">Weak</TD>
<TD id="pwMedium" style="BORDER-RIGHT: black thin solid" align="center" width="33%" title="Has a mix of numbers, lower & upper case characters.">Medium</TD>
<TD id="pwStrong" align="center" width="33%" title="Has numbers, special characters, lower & upper case characters.">Strong</TD>
</TR>
</TABLE>
And this required an action to be added to the txtPassword. As this is ASP.NET we use the following in the page load event for the class:
txtPassword.Attributes.Add("onKeyUp", "passwordChanged()");
2 comments:
im confused about the javascript getObject() working with .net
Wont you have a name mangling issue?
Very usefulllll. I make a copy of the 2 regex to the regex tester, you take take a look at here
Medium password pattern
Strong password pattern
Post a Comment