JavaScript的密码强度检测

« 返回上页作者:乔夫  分类: 网事悠游  日期:2006-8-12 at 4:01  

有时候,有需要这个功能的,自动对输入的密码强弱程度做出判断,收藏。

&lt;script language=&quot;javascript&quot;&gt;<br />
  function PasswordStrength(showed){<br />
this.showed = (typeof(showed) == &quot;boolean&quot;)?showed:true;<br />
this.styles = new Array();<br />
this.styles[0] = {backgroundColor:&quot;#EBEBEB&quot;,borderLeft:&quot;solid 1px #FFFFFF&quot;,borderRight:&quot;solid 1px #BEBEBE&quot;,borderBottom:&quot;solid 1px #BEBEBE&quot;};<br />
this.styles[1] = {backgroundColor:&quot;#FF4545&quot;,borderLeft:&quot;solid 1px #FFFFFF&quot;,borderRight:&quot;solid 1px #BB2B2B&quot;,borderBottom:&quot;solid 1px #BB2B2B&quot;};<br />
this.styles[2] = {backgroundColor:&quot;#FFD35E&quot;,borderLeft:&quot;solid 1px #FFFFFF&quot;,borderRight:&quot;solid 1px #E9AE10&quot;,borderBottom:&quot;solid 1px #E9AE10&quot;};<br />
this.styles[3] = {backgroundColor:&quot;#95EB81&quot;,borderLeft:&quot;solid 1px #FFFFFF&quot;,borderRight:&quot;solid 1px #3BBC1B&quot;,borderBottom:&quot;solid 1px #3BBC1B&quot;};<br />
this.labels= [&quot;弱&quot;,&quot;中&quot;,&quot;强&quot;];<br />
this.divName = &quot;pwd_div_&quot;+Math.ceil(Math.random()*100000);<br />
this.minLen = 5;<br />
this.width = &quot;150px&quot;;<br />
this.height = &quot;16px&quot;;<br />
this.content = &quot;&quot;;<br />
this.sel&amp;#101;ctedIndex = 0;<br />
this.init();<br />
}<br />
PasswordStrength.prototype.init = function(){<br />
var s = &amp;#39;&lt;table cellpadding=&quot;0&quot; id=&quot;&amp;#39;+this.divName+&amp;#39;_table&quot; cellspacing=&quot;0&quot; style=&quot;width:&amp;#39;+this.width+&amp;#39;;height:&amp;#39;+this.height+&amp;#39;;&quot;&gt;&amp;#39;;<br />
s += &amp;#39;&lt;tr&gt;&amp;#39;;<br />
for(var i=0;i&amp;lt;3;i++){<br />
s += &amp;#39;&lt;td id=&quot;&amp;#39;+this.divName+&amp;#39;_td_&amp;#39;+i+&amp;#39;&quot; width=&quot;33%&quot; align=&quot;center&quot;&gt;&lt;span style=&quot;font-size:1px&quot;&gt; &lt;/span&gt;&lt;span id=&quot;&amp;#39;+this.divName+&amp;#39;_label_&amp;#39;+i+&amp;#39;&quot; style=&quot;display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;&quot;&gt;&amp;#39;+this.labels[i]+&amp;#39;&lt;/span&gt;&lt;/td&gt;&amp;#39;;<br />
}<br />
s += &amp;#39;&lt;/tr&gt;&amp;#39;;<br />
s += &amp;#39;&lt;/table&gt;&amp;#39;;<br />
this.content = s;<br />
if(this.showed){<br />
document.write(s);<br />
this.copyToStyle(this.sel&amp;#101;ctedIndex);<br />
}<br />
}<br />
PasswordStrength.prototype.copyToObject = function(o1,o2){<br />
for(var i in o1){<br />
o2[i] = o1[i];<br />
}<br />
}<br />
PasswordStrength.prototype.copyToStyle = function(id){<br />
this.sel&amp;#101;ctedIndex = id;<br />
for(var i=0;i&amp;lt;3;i++){<br />
if(i == id-1){<br />
this.$(this.divName+&quot;_label_&quot;+i).style.display = &quot;inline&quot;;<br />
}else{<br />
this.$(this.divName+&quot;_label_&quot;+i).style.display = &quot;none&quot;;<br />
}<br />
}<br />
for(var i=0;i&lt;id ;i++){<br />
this.copyToObject(this.styles[id],this.$(this.divName+&quot;_td_&quot;+i).style);<br />
}<br />
for(;i&amp;lt;3;i++){<br />
this.copyToObject(this.styles[0],this.$(this.divName+&quot;_td_&quot;+i).style);<br />
}<br />
}<br />
PasswordStrength.prototype.$ = function(s){<br />
return document.getElementById(s);<br />
}<br />
PasswordStrength.prototype.setSize = function(w,h){<br />
this.width = w;<br />
this.height = h;<br />
}<br />
PasswordStrength.prototype.setMinLength = function(n){<br />
if(isNaN(n)){<br />
return ;<br />
}<br />
n = Number(n);<br />
if(n&gt;1){<br />
this.minLength = n;<br />
}<br />
}<br />
PasswordStrength.prototype.setStyles = function(){<br />
if(arguments.length == 0){<br />
return ;<br />
}<br />
for(var i=0;i&lt;arguments .length &amp;&amp; i &lt; 4;i++){<br />
this.styles[i] = arguments[i];<br />
}<br />
this.copyToStyle(this.sel&amp;#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.write = function(s){<br />
if(this.showed){<br />
return ;<br />
}<br />
var n = (s == &amp;#39;string&amp;#39;) ? this.$(s) : s;<br />
if(typeof(n) != &quot;object&quot;){<br />
return ;<br />
}<br />
n.innerHTML = this.content;<br />
this.copyToStyle(this.sel&amp;#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.up&amp;#100;ate = function(s){<br />
if(s.length &lt; this.minLen){<br />
this.copyToStyle(0);<br />
return;<br />
}<br />
var ls = -1;<br />
if (s.match(/[a-z]/ig)){<br />
ls++;<br />
}<br />
if (s.match(/[0-9]/ig)){<br />
ls++;<br />
}<br />
if (s.match(/(.[^a-z0-9])/ig)){<br />
ls++;<br />
}<br />
if (s.length &lt; 6 &amp;&amp; ls &gt; 0){<br />
ls--;<br />
}<br />
switch(ls) {<br />
case 0:<br />
this.copyToStyle(1);<br />
break;<br />
case 1:<br />
this.copyToStyle(2);<br />
break;<br />
case 2:<br />
this.copyToStyle(3);<br />
break;<br />
default:<br />
this.copyToStyle(0);<br />
}<br />
}<br />
&lt;/arguments&gt;&lt;/id&gt;&lt;/script&gt;

调用就行了,很方便,可以看看样例:

&lt;table width=&quot;100%&quot; border=&quot;0&quot; cellspacing=&quot;1&quot; cellpadding=&quot;0&quot;&gt;<br />&lt;tr&gt;<br />&lt;td width=&quot;100&quot; align=&quot;right&quot;&gt;强度显示:&lt;/td&gt;<br />&lt;td&gt;<br />
&lt;script language=&quot;javascript&quot;&gt;<br />
var ps = new PasswordStrength();<br />
//设置显示大小;<br />
ps.setSize(&quot;200&quot;,&quot;20&quot;);<br />
//设置最少检测字符长度;<br />
ps.setMinLength(5);<br />
&lt;/script&gt;<br />
&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;tr&gt;<br />
&lt;td align=&quot;right&quot;&gt;密码检测:&lt;/td&gt;<br />
&lt;td&gt;&lt;input name=&quot;pwd&quot; type=&quot;password&quot; id=&quot;pwd&quot; style=&quot;width:200px&quot; onKeyUp=&quot;ps.up&amp;#100;ate(this.value);&quot;/&gt;&lt;/td&gt;<br />
&lt;/tr&gt;<br />
&lt;/table&gt;
更多分享

暂无评论  Trackback Url:http://ichov.com/web/javascript-password-check.html/trackback

有啥说啥 Leave a Reply