JavaScript密碼強度提示

admin發表於2017-12-26
JavaScript密碼

輸入密碼的時候，根據密碼的複雜程度給出弱、中和強等類似的提示。

下面分享使用JavaScript如何實現此效果。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
#pwdLever td{
  background-color:Gray;
  width:45px;
  text-align:center;
}
</style>
<script type="text/javascript">
window.onload=function(){
  var textInput = document.getElementById("txtPwd");
  //給密碼輸入框 註冊鍵放開事件
  textInput.onkeyup=function(){
    var pwdValue=this.value;
    var num=pwdChange(pwdValue);
    var tds=document.getElementById("pwdLever").getElementsByTagName("td");
    //修改密碼顏色
    if(num==0||num==1){
      tds[0].style.backgroundColor="red";
      tds[1].style.backgroundColor="gray";
      tds[2].style.backgroundColor="gray";
    }
    else if(num == 2){
      tds[0].style.backgroundColor = "red";
      tds[1].style.backgroundColor = "red";
      tds[2].style.backgroundColor = "gray";
    }
    else if(num == 3) {
      tds[0].style.backgroundColor = "red";
      tds[1].style.backgroundColor = "red";
      tds[2].style.backgroundColor = "red";
    }
    else{
      tds[0].style.backgroundColor = "gray";
      tds[1].style.backgroundColor = "gray";
      tds[2].style.backgroundColor = "gray";
    }
  }
}
function pwdChange(v){
  var num = 0;
  var reg = /\d/; //如果有數字
  if (reg.test(v)) {
    num++;
  }
  reg = /[a-zA-Z]/; //如果有字母
  if(reg.test(v)){
    num++;
  }
  reg = /[^0-9a-zA-Z]/; //如果有特殊字元
  if(reg.test(v)) {
    num++;
  }
  //如果密碼小於6 
  if(v.length < 6){ 
    num--;
  }
  return num;
}
</script>
</head>
<body>
<table>
  <tr>
    <td><input type="text" id="txtPwd" /></td>
  </tr>
  <tr>
    <td>
     <table id="pwdLever">
        <tr>
          <td>弱</td>
          <td>中</td>
          <td>強</td>
        </tr>
      </table>
     </td>
  </tr>
</table>
</body>
</html>

在輸入密碼的時候，顯示當前密碼的強度。下面介紹一下實現過程:

一.實現原理:

原理比較簡單，當在密碼框輸入密碼之後觸發onkeyup事件進而執行事件處理函式，此函式可以判斷當前密碼框中的密碼的強度，並返回一個值，然後根據此此設定三個單元格的背景顏色，也就實現了密碼強度提示效果。

二.程式碼註釋:

（1）.window.onload=function(){}，當文件完全載入完畢再去執行函式中的程式碼。

（2）.var textInput=document.getElementById("txtPwd")，獲取id值為txtPwd的物件。

（3）.textInput.onkeyup=function(){}，為密碼框繫結鍵盤按鍵onkeyup事件處理函式。

（4）.var pwdValue=this.value，獲取密碼框的值。

（5）. var num=pwdChange(pwdValue)，建立一個變數num並接收pwdChange()函式的返回值。

（6）.var tds=document.getElementById("pwdLever").getElementsByTagName("td")，獲取id為pwdLever元素的下的所有單元格集合。

（7）.if(num==0||num==1){},根據num的值設定單元格的背景顏色。

（8）.function pwdChange(v){}，建立一個函式用來判斷密碼強度。

相關文章