密碼強(qiáng)度的判斷, 在注冊(cè)網(wǎng)站用戶(hù)的時(shí)候, 是一個(gè)必須要做的事情, 不同的網(wǎng)站, 實(shí)現(xiàn)的方式是不一樣的. 

密碼的判斷, 其實(shí)也就是一個(gè)表單驗(yàn)證的其中一項(xiàng). 那我們來(lái)實(shí)現(xiàn)這么一個(gè)簡(jiǎn)單的操作.

首先做一個(gè)簡(jiǎn)單的密碼輸入框和一個(gè)顯示密碼強(qiáng)度的進(jìn)度條. 整個(gè)整體由vali_pass盒子涵蓋. 這個(gè)盒子包含了標(biāo)題, 密碼框. 再個(gè)就是強(qiáng)度進(jìn)度條.

<div class="vali_pass">

  <h3>簡(jiǎn)單的密碼強(qiáng)度檢測(cè)</h3>

  <input type="password" name="pass">

  <div class="vali_pass_progress">

    <span class="vali_pass_inner_progress"></span>

  </div>

</div>

這樣我們?cè)賮?lái)用CSS來(lái)美化一下

.vali_pass {

  width: 350px;

  margin: 0 auto;

  padding: 10px;

  border: #eee 1px solid;

  text-align: center;

}

.vali_pass input {

  width: 96%;

  display: block;

  margin: 0;

  padding: 5px;

  font-size: 14px;

  line-height: 20px;

}

.vali_pass_progress {

  margin-top: 10px;

  background-color: #efefef;

  height: 10px;

  border-radius: 5px;

}

.vali_pass_inner_progress {

  display: block;

  height: 100%;

  background-color: transparent;

  border-radius: 5px;

  width: 100%;

}

這時(shí)候我們需要考慮的是, 這個(gè)進(jìn)度條可能存在幾種狀態(tài), 前度低的時(shí)候顯示什么狀態(tài), 中程度的時(shí)候顯示什么狀態(tài), 高程度的時(shí)候,顯示什么狀態(tài).

OK, 我們這里用的時(shí)候進(jìn)度條內(nèi)部盒子的寬度,背景色的控制. 設(shè)置為三個(gè)樣式

.error {

 background-color: #ff3300;

}

.middle {

 background-color: gold;

}

.strong {

 background-color: green;

}

這樣HTML結(jié)構(gòu),CSS美化也就完成. 下面我們來(lái)做JS的監(jiān)聽(tīng).

首先少不了的是給密碼輸入框, 加入文本輸入監(jiān)聽(tīng)

ele_pass.onkeyup = function () {...}

對(duì)密碼的判斷, 就得在這個(gè)事件內(nèi)做處理. 不過(guò)在處理之前, 我們得初始化一些數(shù)據(jù). 比如進(jìn)行密碼判斷的正則表達(dá)式.

var regxs = [];

regxs.push(/[^a-zA-Z0-9_]/g);

regxs.push(/[a-zA-Z]/g);

regxs.push(/[0-9]/g);

我這里使用了三個(gè)正則來(lái)依次判斷密碼的匹配度. 數(shù)據(jù)初始化完成后, 處理onkeyup事件. 首先是獲取這個(gè)輸入框的值, 然后其長(zhǎng)度. 長(zhǎng)度我們這里控制至少6個(gè)字符. sec作為安全度的一個(gè)增加值. 每次匹配正則里的表達(dá)式, 就sec++, 說(shuō)明密碼的安全度.然后換算成密碼的100之內(nèi)數(shù)值. 這個(gè)值可以方便用在控制內(nèi)部進(jìn)度條的寬度.

ele_pass.onkeyup = function () {

  var val = this.value;

  var len = val.length;

  var sec = 0;

  if (len >= 6) { // 至少六個(gè)字符

    for (var i = 0; i < regxs.length; i++) {

      if (val.match(regxs[i])) {

        sec++;

      }

    }

  }

  var result = (sec / regxs.length) * 100;

  ele_progress.style.width = result + "%";

}

進(jìn)度條寬度控制好后, 我們暫時(shí)是看不出進(jìn)度條的效果的, 看前面的CSS代碼. 這個(gè)默認(rèn)的背景是透明的. 那下面我們還得控制不同安全值, 他的背景顏色的控制.下面的代碼就是用來(lái)控制其背景色的.

if(result > 0 && result <= 50){

  ele_progress.setAttribute("class",begin_classname + " error");

}else if (result > 50 && result < 100) {

  ele_progress.setAttribute("class",begin_classname + " middle");

} else if (result == 100) {

  ele_progress.setAttribute("class",begin_classname + " strong");

}

最后的JS代碼:

var ele_pass = document.getElementsByTagName("input")[0];

var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];

var begin_classname = ele_progress.className;

var regxs = [];

regxs.push(/[^a-zA-Z0-9_]/g);

regxs.push(/[a-zA-Z]/g);

regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {

  var val = this.value;

  var len = val.length;

  var sec = 0;

  if (len >= 6) { // 至少六個(gè)字符

    for (var i = 0; i < regxs.length; i++) {

      if (val.match(regxs[i])) {

        sec++;

      }

    }

  }

  var result = (sec / regxs.length) * 100;

  ele_progress.style.width = result + "%";

  if(result > 0 && result <= 50){

    ele_progress.setAttribute("class",begin_classname + " error");

  }else if (result > 50 && result < 100) {

    ele_progress.setAttribute("class",begin_classname + " middle");

  } else if (result == 100) {

    ele_progress.setAttribute("class",begin_classname + " strong");

  }

}

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。