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

代碼如下:
   [ 其他 ] 運行代碼    下載代碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.4756661.live/" />
<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實現密碼強度提示代碼實例



5 7



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: js js代碼 js實例 javascript javascript代碼 javascript實例 js提示框彈窗 js彈窗對話框 js消息框 js彈出層 javascript提示框彈窗 javascript彈窗對話框 javascript消息框 javascript彈出層
?
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

林肯娱乐怎么赚钱