js实现密码强度提示代码实例

密码代表着隐私，如果内容有重要的东西或者说不想让别人看到的东西，一般都会设置上密码，但是有时候不知道密码设置的密码是否安全，所以一般人性化比较好的网站都带有密码安全度验证，下面是一段这样的代码实例，和大家分享一下。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.51qianduan.com/" />
<title>51前端</title>
<style type="text/css">
body{font:12px/1.5 Arial;}
input 
{
  float:left;
  font-size:12px;
  width:150px;
  font-family:arial;
  border:1px solid #ccc;
  padding:3px;
}
input.correct{border:1px solid green;}
input.error{border:1px solid red;}
#tips 
{
  float:left;
  margin:2px 0 0 20px;
}
#tips span 
{
  float:left;
  width:50px;
  height:20px;
  color:#fff;
  overflow:hidden;
  background:#ccc;
  margin-right:2px;
  line-height:20px;
  text-align:center;
}
#tips.s1 .active{background:#f30;}
#tips.s2 .active{background:#fc0;}
#tips.s3  .active{background:#cc0;}
#tips.s4 .active{background:#090;}
</style>
<script type="text/javascript">
window.onload = function() {
  var oTips = document.getElementById("tips");
  var oInput = document.getElementsByTagName("input")[0];
  var aSpan = oTips.getElementsByTagName("span");
  var aStr = ["弱", "中", "强", "非常好"];
  var i = 0;
  
  oInput.onkeyup = oInput.onfocus = oInput.onblur = function() {
    var index = checkStrong(this.value);
    this.className = index ? "correct": "error";
    oTips.className = "s" + index;
    for (i = 0; i < aSpan.length; i++) aSpan[i].className = aSpan[i].innerHTML = "";
    index && (aSpan[index - 1].className = "active", aSpan[index - 1].innerHTML = aStr[index - 1])
  }
};
/** 强度规则
  + ------------------------------------------------------- +
  1) 任何少于6个字符的组合，弱；任何字符数的同类字符组合，弱；
  2) 任何字符数的两类字符组合，中；
  3) 12位字符数以下的三类或四类字符组合，强；
  4) 12位字符数以上的三类或四类字符组合，非常好。
  + ------------------------------------------------------- +
**/
//检测密码强度
function checkStrong(sValue) {
  var modes = 0;
  if (sValue.length < 6) return modes;
  if (/\\d/.test(sValue)) modes++; //数字
  if (/[a-z]/.test(sValue)) modes++; //小写
  if (/[A-Z]/.test(sValue)) modes++; //大写  
  if (/\\W/.test(sValue)) modes++; //特殊字符
  switch (modes) {
    case 1:
      return 1;
      break;
    case 2:
      return 2;
    case 3:
    case 4:
      return sValue.length < 12 ? 3 : 4
      break;
  }
}
</script>
</head>
  
<body>
<input type="password" value="" maxlength="16" />
<div id="tips"> <span></span> <span></span> <span></span> <span></span> </div>
</body>
</html>

代码描述：js实现密码强度提示。js实现密码强度提示代码实例

下载全部收藏

178 237

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册