By vaseline28 on Jul 06, 2008This password strength test will display "Weak/Moderate-Weak/Moderate/Strong" it also displays a bar showing the strength.
The important thing about this Javascript, is that it displays the message as you type rather than after you hit a "Submit" button thanks to DHTML.
Copy and paste the entire HTML from below so that you get a feel for how it works, there are also edit notes in there for if you wish to use the snippet but without this HTML.
The actual script you may want to use is between the tags. It is the 'function passwordstrength' area.
<html>
<head>
<title>Password Demo</title>
<script type="text/javascript">
function passwordstrength () {
// Replace areas in Caps in the line below with the NUMERICAL value you want to search for.
// For example, if you want "Less than 4 characters" to be weak, replace "l=6 ;" with "l=4;"
l=6 ; m=8 ; n=10 ;
b=document.getElementById('Password').value ;
if (b.length<l) {
//You can type in whichever message you like for the below. Just edit the "Message" or "Length of Line" with the appropriate message/underscores
c="Password Strength: <font color='red'><b>WEAK</b></font>" ;
d="<font size='2'><font color='red'><b>_______________</b></font>" ;
}
else if (b.length<m) {
c="Password Strength: <font color='#FF3300'><b>MODERATE-WEAK</b></font>" ;
d="<font size='2'><font color='#FF3300'><b>_____________________</b></font>" ;
}
else if (b.length<n) {
c="Password Strength: <font color='blue'><b>MODERATE</b></font>" ;
d="<font size='2'><font color='blue'><b>____________________________</b></font>" ;
}
else {
c="Password Strength: <font color='green'><b>STRONG</b></font>" ;
d="<font size='2'><font color='green'><b>_____________________________________</b></font>" ;
}
//This area specifies which text areas the messages go to. Replace 'Display' or 'Strength Visual' with the id of the area.
document.getElementById('Display').innerHTML=c ;
document.getElementById('Strength Visual').innerHTML=d ;
}
</script>
</head>
<body>
<!-- Area below is just the HTML used to Demo this, edit your own in if you need to! -->
<div style="background-color:FFF5CF; position: absolute; width: 461px; height: 36px; z-index: 1; left: 15px; top: 31px" id="PassWord Field">
<div style="position: absolute; width: 272px; height: 6px; z-index: 3; left: 172px; top: 14px" id="Strength Visual">
<font size="1"></font></div>
<div style="position: absolute; width: 271px; height: 12px; z-index: 2; left: 173px; top: 3px" id="Strength Box">
<font id="Display" size="2">Password Strength:</font></div>
<div style="position: absolute; width: 161px; height: 11px; z-index: 1; left: 6px; top: 7px" id="EntryBox">
<input onkeypress='Javascript:passwordstrength()' type="password" id="Password"></div>
</div>
</body>
</html>
@Hawkee/mountaindew:
Advanced Version << Contains your \'Better Criteria\'. Length/Numbers/Capitalization
Thanks for the suggestion(s).
@Anyone else: If you\'re not confident with Javascript/HTML I recommend that you stick to this one though.
