JavaScript密码强度检测源代码

最新推荐文章于 2025-08-07 21:48:39 发布

转载最新推荐文章于 2025-08-07 21:48:39 发布 · 479 阅读

文章标签：

#javascript #function #table #border #object #string

HTML/JS/CSS/DIV 专栏收录该内容

30 篇文章

订阅专栏

本文介绍了一个简单的密码强度检测器实现方案，通过JavaScript动态评估输入密码的复杂度，并以不同的颜色和标签显示其强度等级。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.Body代码部分 <body> <h4>密码强度检测</h4> <table width="100%" border="0" cellspacing="1" cellpadding="0"> <tr> <td width="100" align="right">强度显示：</td> <td> <script language="javascript"> var ps = new PasswordStrength(); ps.setSize("200","20"); ps.setMinLength(5); </script> </td> </tr> <tr> <td align="right">密码检测：</td> <td><input name="pwd" type="password" id="pwd" style="width:200px" onKeyUp="ps.update(this.value);"></td> </tr> </table> </body> 2.JS代码部分 //密码强度; function PasswordStrength(showed){ this.showed = (typeof(showed) == "boolean")?showed:true; this.styles = new Array(); this.styles[0] = {backgroundColor:"#EBEBEB",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BEBEBE",borderBottom:"solid 1px #BEBEBE"}; this.styles[1] = {backgroundColor:"#FF4545",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #BB2B2B",borderBottom:"solid 1px #BB2B2B"}; this.styles[2] = {backgroundColor:"#FFD35E",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #E9AE10",borderBottom:"solid 1px #E9AE10"}; this.styles[3] = {backgroundColor:"#95EB81",borderLeft:"solid 1px #FFFFFF",borderRight:"solid 1px #3BBC1B",borderBottom:"solid 1px #3BBC1B"}; this.labels= ["弱","中","强"];

this.divName = "pwd_div_"+Math.ceil(Math.random()*100000); this.minLen = 5; this.width = "150px"; this.height = "16px"; this.content = ""; this.selectedIndex = 0; this.init(); } PasswordStrength.prototype.init = function(){ var s = '<table cellpadding="0" id="'+this.divName+'_table" cellspacing="0" style="width:'+this.width+';height:'+this.height+';">'; s += '<tr>'; for(var i=0;i<3;i++){ s += '<td id="'+this.divName+'_td_'+i+'" width="33%" align="center"><span style="font-size:1px"> </span><span id="'+this.divName+'_label_'+i+'" style="display:none;font-family: Courier New, Courier, mono;font-size: 12px;color: #000000;">'+this.labels[i]+'</span></td>'; } s += '</tr>'; s += '</table>'; this.content = s; if(this.showed){ document.write(s); this.copyToStyle(this.selectedIndex); } } PasswordStrength.prototype.copyToObject = function(o1,o2){ for(var i in o1){ o2[i] = o1[i]; } } PasswordStrength.prototype.copyToStyle = function(id){ this.selectedIndex = id; for(var i=0;i<3;i++){ if(i == id-1){ this.$(this.divName+"_label_"+i).style.display = "inline"; }else{ this.$(this.divName+"_label_"+i).style.display = "none"; } } for(var i=0;i<id;i++){ this.copyToObject(this.styles[id],this.$(this.divName+"_td_"+i).style); } for(;i<3;i++){ this.copyToObject(this.styles[0],this.$(this.divName+"_td_"+i).style); } } PasswordStrength.prototype.$ = function(s){ return document.getElementById(s); } PasswordStrength.prototype.setSize = function(w,h){ this.width = w; this.height = h; } PasswordStrength.prototype.setMinLength = function(n){ if(isNaN(n)){ return ; } n = Number(n); if(n>1){ this.minLength = n; } } PasswordStrength.prototype.setStyles = function(){ if(arguments.length == 0){ return ; } for(var i=0;i<arguments.length && i < 4;i++){ this.styles[i] = arguments[i]; } this.copyToStyle(this.selectedIndex); } PasswordStrength.prototype.write = function(s){ if(this.showed){ return ; } var n = (s == 'string') ? this.$(s) : s; if(typeof(n) != "object"){ return ; } n.innerHTML = this.content; this.copyToStyle(this.selectedIndex); } PasswordStrength.prototype.update = function(s){ if(s.length < this.minLen){ this.copyToStyle(0); return; } var ls = -1; if (s.match(/[a-z]/ig)){ ls++; } if (s.match(/[0-9]/ig)){ ls++; } if (s.match(/(.[^a-z0-9])/ig)){ ls++; } if (s.length < 6 && ls > 0){ ls--; } switch(ls) { case 0: this.copyToStyle(1); break; case 1: this.copyToStyle(2); break; case 2: this.copyToStyle(3); break; default: this.copyToStyle(0); } }