快捷導(dǎo)航

JS實(shí)現(xiàn)的四級(jí)密碼強(qiáng)度檢測(cè)功能示例

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> 密碼強(qiáng)度檢測(cè) </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>強(qiáng)</span>
 <span>很強(qiáng)</span>
 </div>
</body>
 <script type="text/javascript">
 var password = document.getElementById("password"); //獲取文本框的對(duì)象
 //var value = password.value; //獲取用戶在文本框里面填寫(xiě)的值
 //獲取所有的span標(biāo)簽 返回值是一個(gè)數(shù)組
 var spanDoms = document.getElementsByTagName("span");
 password.onkeyup = function(){
  //獲取用戶輸入的密碼,然后判斷其強(qiáng)度 返回0 或者 1 2 3 4
  var index = checkPassWord(this.value);
  for(var i = 0; i <spanDoms.length; i++){
   spanDoms[i].className = "";//清空span標(biāo)簽所有的class樣式
   if(index){//0 代表false 其余代表true
    spanDoms[index-1].className = "s" + index ;
   }
  }
 }
 //校驗(yàn)密碼強(qiáng)度
 function checkPassWord(value){
  // 0： 表示第一個(gè)級(jí)別 1：表示第二個(gè)級(jí)別 2：表示第三個(gè)級(jí)別
  // 3： 表示第四個(gè)級(jí)別 4：表示第五個(gè)級(jí)別
  var modes = 0;
  if(value.length < 6){//最初級(jí)別
   return modes;
  }
  if(/\d/.test(value)){//如果用戶輸入的密碼 包含了數(shù)字
   modes++;
  }
  if(/[a-z]/.test(value)){//如果用戶輸入的密碼 包含了小寫(xiě)的a到z
   modes++;
  }
  if(/[A-Z]/.test(value)){//如果用戶輸入的密碼 包含了大寫(xiě)的A到Z
   modes++;
  }
  if(/\W/.test(value)){//如果是非數(shù)字 字母 下劃線
   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>

說(shuō)明： 這里實(shí)現(xiàn)的功能主要是，輸入密碼的時(shí)候，一邊輸一邊檢測(cè)，有四個(gè)安全級(jí)別，當(dāng)輸入的密碼符合某個(gè)級(jí)別的規(guī)則時(shí)，該級(jí)別的標(biāo)志條就會(huì)高亮變色。

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