JavaScript密碼強度提醒

admin發表於2018-08-06
JavaScript密碼

人性化密碼設定，通常會根據設定的密碼內容，提示密碼的強度，在一定程度上能夠提醒使用者將密碼設定的更為安全。

下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下: 

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
#passStrength{
  height:6px;
  width:120px;
  border:1px solid #ccc;
  padding:2px;
}
.strengthLv1{
  background:red;
  height:6px;
  width:40px;
}
.strengthLv2{
  background:orange;
  height:6px;
  width:80px;
}
.strengthLv3{
  background:green;
  height:6px;
  width:120px;
}
</style>
<script type="text/javascript"> 
function PasswordStrength(passwordID, strengthID) {
  this.init(strengthID);
  var _this = this;
  document.getElementById(passwordID).onkeyup = function() {
    _this.checkStrength(this.value);
  }
};
PasswordStrength.prototype.init=function(strengthID){
  var id = document.getElementById(strengthID);
  var div = document.createElement('div');
  var strong = document.createElement('strong');
  this.oStrength = id.appendChild(div);
  this.oStrengthTxt = id.parentNode.appendChild(strong);
};
PasswordStrength.prototype.checkStrength=function(val){
  var aLvTxt = ['', '低', '中', '高'];
  var lv = 0;
  if(val.match(/[a-z]/g)){lv++;}
  if(val.match(/[0-9]/g)){lv++;}
  if(val.match(/(.[^a-z0-9])/g)){lv++;}
  if(val.length < 6){lv=0;}
  if(lv > 3){lv=3;}
  this.oStrength.className = 'strengthLv' + lv;
  this.oStrengthTxt.innerHTML = aLvTxt[lv];
};
window.onload=function(){
  new PasswordStrength('pass','passStrength');
}
</script>
</head>
<body>
<input type="password" name="pass" id="pass" maxlength="16"/>
<div class="pass-wrap">
  密碼強度:<div id="passStrength"></div>
</div>
</body>
</html>

上面的程式碼實現了簡單的密碼強度提示效果，下面介紹一下它的實現過程。

一.程式碼註釋：

（1）.function PasswordStrength(passwordID, strengthID) {}，宣告一個函式，這裡是用作建構函式，第一個引數是密碼框的id屬性值，第二個引數是要顯示密碼強度的元素的id屬性值。

（2）.this.init(strengthID)，init()函式是PasswordStrength()是在建構函式原型原型物件上的一個函式，用來建立和追加相應的元素，this是指向PasswordStrength()建構函式的物件例項。

（3）.var _this = this，將PasswordStrength()建構函式例項物件this引用賦值給變數_this。

（4）.document.getElementById(passwordID).onkeyup=function() {_this.checkStrength(this.value);}，為文字框註冊onkeyup事件處理函式。

（5）.PasswordStrength.prototype.init=function(strengthID){}，為建構函式的原型物件新增init函式。

（6）.var id = document.getElementById(strengthID)，獲取具有指定id的元素物件。

（7）.var div = document.createElement('div')，建立一個div元素。

（8）.var strong = document.createElement('strong')，建立一個strong元素。

（9）.this.oStrength = id.appendChild(div)，將建立的div元素附加到獲取元素物件中去，在本程式碼中就是新增到passStrength元素中去，新新增的這個div用來顯示密碼強度紅黃藍圖示。

（10）.this.oStrengthTxt = id.parentNode.appendChild(strong)，給獲取到元素的父節點新增一個strong子節點，在本程式碼中就是將strong元素新增到pass-wrap元素中去，用來顯示低、中和高。

（11）.PasswordStrength.prototype.checkStrength=function(val){}，為建構函式的原型物件新增checkStrength函式，引數是文字框值。

（12）.var aLvTxt = ['', '低', '中', '高']，建立一個陣列，儲存的是表示密碼強度的文字。

（13）.var lv = 0，宣告一個變數，初始值為0，用來標識密碼的強度。

（14）.if(val.match(/[a-z]/g)){lv++;}，如果密碼中包含a-z的字母，那麼lv加1。

（15）.if(val.match(/[0-9]/g)){lv++;}，如果密碼中包含0-9的數字，那麼lv加1。

（16）.if(val.match(/(.[^a-z0-9])/g)){lv++;}，如果密碼中包含的字元並非字母或者數字，而是其他比較偏僻的符號，那麼lv加1.

（17）.if(val.length < 6){lv=0;}，如果密碼的長度小於6，那麼僵lv的值重置為0。

（18）.if(lv > 3){lv=3;}，如果lv大於3，那麼就將其設定為3.

（19）.this.oStrength.className = 'strengthLv' + lv，設定第7步建立的div的class樣式值。

（20）.this.oStrengthTxt.innerHTML = aLvTxt[lv]，在第8步建立的strong元素中顯示密碼強度文字。

（21）.new PasswordStrength('pass','passStrength')，以構造方式的形式執行函式。

二.相關閱讀：

（1）.onkeyup事件參閱javascript keyup 事件一章節。 

（2）.prototype參閱javascript prototype 原型一章節。 

（3）.appendChild()參閱js appendChild()一章節。 

（4）.parentNode參閱js parentNode一章節。

（5）.match()參閱正規表示式match()函式一章節。 

（6）.className參閱js className屬性詳解一章節。 

相關文章