有时候,有需要这个功能的,自动对输入的密码强弱程度做出判断,收藏。
<script language="javascript"><br />
function PasswordStrength(showed){<br />
this.showed = (typeof(showed) == "boolean")?showed:true;<br />
this.styles = new Array();<br />
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};<br />
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};<br />
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};<br />
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};<br />
this.labels= ["弱","中","强"];<br />
this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);<br />
this.minLen = 5;<br />
this.width = "150px";<br />
this.height = "16px";<br />
this.content = "";<br />
this.sel&#101;ctedIndex = 0;<br />
this.init();<br />
}<br />
PasswordStrength.prototype.init = function(){<br />
var s = &#39;<table cellpadding="0" id="&#39;+this.divName+&#39;_table" cellspacing="0" style="width:&#39;+this.width+&#39;;height:&#39;+this.height+&#39;;">&#39;;<br />
s += &#39;<tr>&#39;;<br />
for(var i=0;i&lt;3;i++){<br />
s += &#39;<td id="&#39;+this.divName+&#39;_td_&#39;+i+&#39;" width="33%" align="center"><span style="font-size:1px"> </span><span id="&#39;+this.divName+&#39;_label_&#39;+i+&#39;" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">&#39;+this.labels[i]+&#39;</span></td>&#39;;<br />
}<br />
s += &#39;</tr>&#39;;<br />
s += &#39;</table>&#39;;<br />
this.content = s;<br />
if(this.showed){<br />
document.write(s);<br />
this.copyToStyle(this.sel&#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&#101;ctedIndex = id;<br />
for(var i=0;i&lt;3;i++){<br />
if(i == id-1){<br />
this.$(this.divName+"_label_"+i).style.display = "inline";<br />
}else{<br />
this.$(this.divName+"_label_"+i).style.display = "none";<br />
}<br />
}<br />
for(var i=0;i<id ;i++){<br />
this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);<br />
}<br />
for(;i&lt;3;i++){<br />
this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+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>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<arguments .length && i < 4;i++){<br />
this.styles[i] = arguments[i];<br />
}<br />
this.copyToStyle(this.sel&#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.write = function(s){<br />
if(this.showed){<br />
return ;<br />
}<br />
var n = (s == &#39;string&#39;) ? this.$(s) : s;<br />
if(typeof(n) != "object"){<br />
return ;<br />
}<br />
n.innerHTML = this.content;<br />
this.copyToStyle(this.sel&#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.up&#100;ate = function(s){<br />
if(s.length < 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 < 6 && ls > 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 />
</arguments></id></script>
function PasswordStrength(showed){<br />
this.showed = (typeof(showed) == "boolean")?showed:true;<br />
this.styles = new Array();<br />
this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"};<br />
this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"};<br />
this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"};<br />
this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"};<br />
this.labels= ["弱","中","强"];<br />
this.divName = "pwd_div_"+Math.ceil(Math.random()*100000);<br />
this.minLen = 5;<br />
this.width = "150px";<br />
this.height = "16px";<br />
this.content = "";<br />
this.sel&#101;ctedIndex = 0;<br />
this.init();<br />
}<br />
PasswordStrength.prototype.init = function(){<br />
var s = &#39;<table cellpadding="0" id="&#39;+this.divName+&#39;_table" cellspacing="0" style="width:&#39;+this.width+&#39;;height:&#39;+this.height+&#39;;">&#39;;<br />
s += &#39;<tr>&#39;;<br />
for(var i=0;i&lt;3;i++){<br />
s += &#39;<td id="&#39;+this.divName+&#39;_td_&#39;+i+&#39;" width="33%" align="center"><span style="font-size:1px"> </span><span id="&#39;+this.divName+&#39;_label_&#39;+i+&#39;" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">&#39;+this.labels[i]+&#39;</span></td>&#39;;<br />
}<br />
s += &#39;</tr>&#39;;<br />
s += &#39;</table>&#39;;<br />
this.content = s;<br />
if(this.showed){<br />
document.write(s);<br />
this.copyToStyle(this.sel&#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&#101;ctedIndex = id;<br />
for(var i=0;i&lt;3;i++){<br />
if(i == id-1){<br />
this.$(this.divName+"_label_"+i).style.display = "inline";<br />
}else{<br />
this.$(this.divName+"_label_"+i).style.display = "none";<br />
}<br />
}<br />
for(var i=0;i<id ;i++){<br />
this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style);<br />
}<br />
for(;i&lt;3;i++){<br />
this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+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>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<arguments .length && i < 4;i++){<br />
this.styles[i] = arguments[i];<br />
}<br />
this.copyToStyle(this.sel&#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.write = function(s){<br />
if(this.showed){<br />
return ;<br />
}<br />
var n = (s == &#39;string&#39;) ? this.$(s) : s;<br />
if(typeof(n) != "object"){<br />
return ;<br />
}<br />
n.innerHTML = this.content;<br />
this.copyToStyle(this.sel&#101;ctedIndex);<br />
}<br />
PasswordStrength.prototype.up&#100;ate = function(s){<br />
if(s.length < 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 < 6 && ls > 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 />
</arguments></id></script>
调用就行了,很方便,可以看看样例:
<table width="100%" border="0" cellspacing="1" cellpadding="0"><br /><tr><br /><td width="100" align="right">强度显示:</td><br /><td><br />
<script language="javascript"><br />
var ps = new PasswordStrength();<br />
//设置显示大小;<br />
ps.setSize("200","20");<br />
//设置最少检测字符长度;<br />
ps.setMinLength(5);<br />
</script><br />
</td><br />
</tr><br />
<tr><br />
<td align="right">密码检测:</td><br />
<td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.up&#100;ate(this.value);"/></td><br />
</tr><br />
</table>
<script language="javascript"><br />
var ps = new PasswordStrength();<br />
//设置显示大小;<br />
ps.setSize("200","20");<br />
//设置最少检测字符长度;<br />
ps.setMinLength(5);<br />
</script><br />
</td><br />
</tr><br />
<tr><br />
<td align="right">密码检测:</td><br />
<td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.up&#100;ate(this.value);"/></td><br />
</tr><br />
</table>
暂无评论 Trackback Url:http://ichov.com/web/javascript-password-check.html/trackback


