密码检测代码收藏整理

最新推荐文章于 2024-08-31 08:11:20 发布

Dora

最新推荐文章于 2024-08-31 08:11:20 发布

阅读量538

点赞数

CC 4.0 BY-SA版权

分类专栏：网络知识搜集整理文章标签： function javascript table border object string

本文链接：https://blog.youkuaiyun.com/qingyun0719/article/details/5219080

网络知识搜集整理专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的密码强度检测方法。该方法通过分析密码的组成元素（如大小写字母、数字和特殊字符），并结合密码长度来评估密码强度。提供了两种不同方式的密码强度指示器，一种是通过不同的颜色和标签展示强度等级，另一种则是通过文字提示和进度条样式显示。

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

js.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);
}
}

页面代码:

<html>
<head>
<title>PasswordStrength</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script language="javascript" src="js.js"></script>
</head>
<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>
</html>
=======================================================================================

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>密码</title>
<style type="text/css">
body{
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
margin:0;
}
form{
margin:2em;
}
#chkResult{margin-left:53px;height:15px;}
</style>
</head>
<body>
<form name="form1">
<label for="pwd">用户密码</label>
<input type="password" name="pwd" onblur="chkpwd(this)" />
<div id="chkResult"></div>
<label for="pwd2">重复密码</label>
<input type="password" name="pwd2" />
</form>
<script type="text/javascript">
function chkpwd(obj){
  var t=obj.value;
  var id=getResult(t);

  //定义对应的消息提示
  var msg=new Array(4);
  msg[0]="密码过短。";
  msg[1]="密码强度差。";
  msg[2]="密码强度良好。";
  msg[3]="密码强度高。";

  var sty=new Array(4);
  sty[0]=-45;
  sty[1]=-30;
  sty[2]=-15;
  sty[3]=0;

  var col=new Array(4);
  col[0]="gray";
  col[1]="red";
  col[2]="#ff6600";
  col[3]="Green";

  //设置显示效果
  var bImg="http://bbs.blueidea.com/attachments/2006/12/7/pwdlen_dSIPeEGQWxfO.gif";//一张显示用的图片
  var sWidth=300;
  var sHeight=15;
  var Bobj=document.getElementById("chkResult");
  Bobj.style.fontSize="12px";
  Bobj.style.color=col[id];
  Bobj.style.width=sWidth + "px";
  Bobj.style.height=sHeight + "px";
  Bobj.style.lineHeight=sHeight + "px";
  Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";
  Bobj.style.textIndent="20px";
  Bobj.innerHTML="检测提示：" + msg[id];
}

//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强
function getResult(s){
  if(s.length < 4){
   return 0;
  }
  var ls = 0;
  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--;
  }
  return ls
}
</script>
</body>
</html>