js實現的密碼強度提示程式碼

antzone發表於2017-03-17
JS密碼

密碼代表著隱私，如果內容有重要的東西或者說不想讓別人看到的東西，一般都會設定上密碼，但是有時候不知道密碼設定的密碼是否安全，所以一般人性化比較好的網站都帶有密碼安全度驗證，下面是一段這樣的程式碼例項，和大家分享一下。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</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>

相關文章