By vaseline28 on Jul 12, 2008If you're a little unsure on Javascript, I recommend that you use the simple version of the script found here.
This script evaluates a password by checking:
Set up Guide:
HTML:
<body><div style="background-color:FFF5CF; position: absolute; width: 461px; height: 36px; z-index: 1; left: 11px; top: 14px" id="PassWord Field">
<div style="position: absolute; width: 272px; height: 6px; z-index: 3; left: 172px; top: 14px" id="Strength Visual">
</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:PassWord()' type="password" id="Password"></div>
</div>
</body>
Javascript:
Paste below script into the
The below is only the Javascript if you want the HTML which was used in the Demo, please PM me or paste the HTML from the code tags above.
For a Preview check out the Live Demo!
<script type="text/javascript">
function PassWord () {
a=document.getElementById('Password').value ;
b=0;
PassWordStrength(a,b) ;
}
function PassWordStrength (a,b) {
//Awards Points for Length
if (a.length<12) {
c=a.length/2 ; l=c.toFixed(0) ; g=0 ;
while (g<l) {
b=b+1 ; g=g+1 ;
}
}
else { b=b+6 ; }
//This section awards points for existence and number of numbers in the Password Field
numTest=new RegExp("[0-9]","g") ;
numVal=1 ; c="" ;
while (numVal!=null) {
numVal=numTest.exec(a) ; c=c+numVal ;
}
g=0 ; d="" ;
if (c.length-4<2) { b=b+0 ; }
else if (c.length-4<4) { b=b+2 ; }
else if (c.length-4<8) { b=b+4 ; }
else { b=b+6 }
//The final evaluating section will add points for the ratio of Capitalised/LowerCase
capTest=new RegExp("[A-Z]","g") ;
capVal=1 ; c="" ; Total="" ;
while (capVal!=null) {
capVal=capTest.exec(a) ; c=c+capVal ; Total=Total+capVal
}
lowerTest=new RegExp("[a-z]","g") ;
lowerVal=1 ; d="" ;
while (lowerVal!=null) {
lowerVal=lowerTest.exec(a) ; d=d+lowerVal ; Total=Total+lowerVal
}
Per=Total.length-8 ; Perc=Per/100 ; Percent=Perc*1 ; Cap=c.length-4 ; Capo=Percent*Cap ; Caps=Capo.toFixed(0) ; Low=d.length-4 ; Lowe=Percent*Low ; Lower=Lowe.toFixed(0) ; difference=Caps-Lower;
if (difference<60) {
dif=difference/10 ; diff=dif.toFixed(0) ; diff=diff-1 ; g=0 ;
while (g<diff) {
g=g+1 ; b=b+1 ;
}
}
else { b=b+6 }
//This section converts the points gained into a bar
f=0 ; Bar="" ;
while (f<b*2) { f=f+1 ; Bar=Bar+"_" ; }
//And then the Bar into Wording with the Points next to it
if (Bar.lengthɡ) { StrengthFinal="<b><font color='red'>WEAK</font></b> Points:"+b*2 ; Bar="<font color='red'>"+Bar+"</font>" ;}
else if (Bar.lengthគ) { StrengthFinal="<b><font color='CC6600'>MODERATE</font></b> Points:"+b*2; Bar="<font color='CC6600'>"+Bar+"</font>" ;}
else if (Bar.lengthឈ) { StrengthFinal="<b><font color='FF9933'>MODERATELY-STRONG</font></b> Points:"+b*2; Bar="<font color='FF9933'>"+Bar+"</font>" ;}
else { StrengthFinal="<b><font color='green'>STRONG</font></b> Points:"+b*2; Bar="<font color='green'>"+Bar+"</font>" }
//The area below defines where the information about the password is put.
document.getElementById('Strength Box').innerHTML=StrengthFinal ;
document.getElementById('Strength Visual').innerHTML=Bar ;
}
</script>
It\'s shorter than it used to be. Before it was made up of 6 functions. You could cut the first one out, but it eases the DHTML.
And yes, a lot of code to generate two lines!
If you were worried about the size, you could upload it elsewhere and use a
<script type=\"text/javascript\" src=\"HERE URL\">
I\'m having some problems here (PMed Hawkee though).
When pasting my script, this website seems to be changing some of the symbols to question marks etc.
Either look at the source on the Demo, or PM me for a link to an upload of the script which I will do if you wish to use this - until this gets sorted out.
