JS實現(xiàn)的四級密碼強度檢測功能示例

更新時間：2017年05月11日 11:38:48 作者：平凡的華仔

這篇文章主要介紹了JS實現(xiàn)的四級密碼強度檢測功能,具有實時檢測輸入密碼強度的功能,涉及javascript針對字符串的正則判定相關操作技巧,需要的朋友可以參考下

本文實例講述了JS實現(xiàn)的四級密碼強度檢測功能。分享給大家供大家參考，具體如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> 密碼強度檢測 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style type="text/css">
 input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
 #tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
 #tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
 #tips .s1{background: #F45A68;}/*紅色*/
 #tips .s2{background: #fc0;}/*橙色*/
 #tips .s3{background: #cc0;}/*黃色*/
 #tips .s4{background: #14B12F;}/*綠色*/
 </style>
 </head>
 <body>
 <input type="text" id="password" value="" maxlength="16" />
 <div id="tips">
 <span>弱</span>
 <span>中</span>
 <span>強</span>
 <span>很強</span>
 </div>
</body>
 <script type="text/javascript">
 var password = document.getElementById("password"); //獲取文本框的對象
 //var value = password.value; //獲取用戶在文本框里面填寫的值
 //獲取所有的span標簽 返回值是一個數組
 var spanDoms = document.getElementsByTagName("span");
 password.onkeyup = function(){
  //獲取用戶輸入的密碼,然后判斷其強度 返回0 或者 1 2 3 4
  var index = checkPassWord(this.value);
  for(var i = 0; i <spanDoms.length; i++){
   spanDoms[i].className = "";//清空span標簽所有的class樣式
   if(index){//0 代表false 其余代表true
    spanDoms[index-1].className = "s" + index ;
   }
  }
 }
 //校驗密碼強度
 function checkPassWord(value){
  // 0： 表示第一個級別 1：表示第二個級別 2：表示第三個級別
  // 3： 表示第四個級別 4：表示第五個級別
  var modes = 0;
  if(value.length < 6){//最初級別
   return modes;
  }
  if(/\d/.test(value)){//如果用戶輸入的密碼 包含了數字
   modes++;
  }
  if(/[a-z]/.test(value)){//如果用戶輸入的密碼 包含了小寫的a到z
   modes++;
  }
  if(/[A-Z]/.test(value)){//如果用戶輸入的密碼 包含了大寫的A到Z
   modes++;
  }
  if(/\W/.test(value)){//如果是非數字 字母 下劃線
   modes++;
  }
  switch(modes){
   case 1 :
    return 1;
    break;
   case 2 :
    return 2;
    break;
   case 3 :
    return 3;
    break;
   case 4 :
    return 4;
    break;
  }
 }
 </script>
</html>

說明： 這里實現(xiàn)的功能主要是，輸入密碼的時候，一邊輸一邊檢測，有四個安全級別，當輸入的密碼符合某個級別的規(guī)則時，該級別的標志條就會高亮變色。

下面是測試的情況，（這里為了能看到效果，所以把type=“password”故意改成type=“text”），至于檢測中級別的規(guī)則，讀者可以自己根據需要自行修改，主要是js正則表達式的修改。另外，當把最后一個圖片的輸入內容，逐步地刪除，直到只剩第一個圖片的輸入內容，這一過程中，效果就是下面的從下到上變化了