快捷導(dǎo)航

js檢驗(yàn)密碼強(qiáng)度(低中高)附圖

更新時(shí)間：2014年06月05日 17:23:43 作者：

注冊(cè)模塊中輸入密碼需要顯示密碼強(qiáng)度（低中高）本例將做的效果給大家分享下

最近一直在做通行證項(xiàng)目，里面的注冊(cè)模塊中輸入密碼需要顯示密碼強(qiáng)度（低中高）。今天就把做的效果給大家分享下，代碼沒有網(wǎng)上搜索的那么復(fù)雜，能夠滿足一般的需求。

html 代碼如下：

 
<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>密碼強(qiáng)度</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> 
</head> 
<body> 
<input type="password" name="pass" id="pass" maxlength="16"/> 
<div class="pass-wrap"> 
<em>密碼強(qiáng)度：</em> 
<div id="passStrength"></div> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="js/passwordStrength.js"></script> 
<script type="text/javascript"> 
new PasswordStrength('pass','passStrength'); 
</script> 

js 代碼如下：

復(fù)制代碼代碼如下:

 
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]; 
}; 

效果圖：

使用說明：

1、對(duì)象的第一個(gè)參數(shù)是密碼輸入框的 id，第二個(gè)參數(shù)是密碼強(qiáng)度長條的 id。

2、checkStrength 方法中可以自定義密碼強(qiáng)度的規(guī)則。

3、密碼強(qiáng)度顯示低中高分別對(duì)應(yīng) 3 個(gè) css 樣式（strengthLv1、strengthLv2、strengthLv3）。

您可能感興趣的文章: