用Javascript評估用戶輸入密碼的強(qiáng)度（Knockout版）
2011-11-27 10:40 湯姆大叔 閱讀(15023) 評論(10) 收藏 舉報(bào)早上看到博友6點(diǎn)多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章（連接），甚是感動(dòng)（周末大早上還來發(fā)文）。
我們來看看如果使用Knockout更簡單的來實(shí)現(xiàn)密碼強(qiáng)度的驗(yàn)證。
原有代碼請查看：
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
//CharMode函數(shù)
function CharMode(iN) {
if (iN >=48&& iN <=57) //數(shù)字
return1;
if (iN >=65&& iN <=90) //大寫字母
return2;
if (iN >=97&& iN <=122) //小寫
return4;
else
return8; //特殊字符
}
//bitTotal函數(shù)
function bitTotal(num) {
modes =0;
for (i =0; i <4; i++) {
if (num &1) modes++;
num >>>=1;
}
return modes;
}
//checkStrong函數(shù)
function checkStrong(sPW) {
if (sPW.length <=4)
return0; //密碼太短
Modes =0;
for (i =0; i < sPW.length; i++) {
Modes |= CharMode(sPW.charCodeAt(i));
}
return bitTotal(Modes);
}
//pwStrength函數(shù)
function pwStrength(pwd) {
O_color ="#eeeeee";
L_color ="#FF0000";
M_color ="#FF9900";
H_color ="#33CC00";
if (pwd ==null|| pwd =='') {
Lcolor = Mcolor = Hcolor = O_color;
} else {
S_level = checkStrong(pwd);
switch (S_level) {
case0:
Lcolor = Mcolor = Hcolor = O_color;
case1:
Lcolor = L_color;
Mcolor = Hcolor = O_color;
break;
case2:
Lcolor = Mcolor = M_color;
Hcolor = O_color;
break;
default:
Lcolor = Mcolor = Hcolor = H_color;
}
document.getElementById("strength_L").style.background = Lcolor;
document.getElementById("strength_M").style.background = Mcolor;
document.getElementById("strength_H").style.background = Hcolor;
return;
}
} </script>
<form name="form1" action="">
輸入密碼:<input type="password" size="10" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">
<br>
密碼強(qiáng)度:
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
height="23" style='display: inline'>
<tr align="center" bgcolor="#eeeeee">
<td width="33%" id="strength_L">
弱
</td>
<td width="33%" id="strength_M">
中
</td>
<td width="33%" id="strength_H">
強(qiáng)
</td>
</tr>
</table>
</form>
</body>
</html>
首先我們來改善一下上面博友的驗(yàn)證函數(shù)為如下代碼：
var Page = Page || {};
Page.Utility = Page.Utility || {};
Page.Utility.Registration = Page.Utility.Registration || {};
//獲取密碼強(qiáng)度
Page.Utility.Registration.getPasswordLevel = function (password) {
if (password == null || password == '')
return 0;
if (password.length <= 4)
return 0; //密碼太短
var Modes = 0;
for (i = 0; i < password.length; i++) {
Modes |= CharMode(password.charCodeAt(i));
}
return bitTotal(Modes);
//CharMode函數(shù)
function CharMode(iN) {
if (iN >= 48 && iN <= 57) //數(shù)字
return 1;
if (iN >= 65 && iN <= 90) //大寫字母
return 2;
if (iN >= 97 && iN <= 122) //小寫
return 4;
else
return 8; //特殊字符
}
//bitTotal函數(shù)
function bitTotal(num) {
modes = 0;
for (i = 0; i < 4; i++) {
if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
};
然后來創(chuàng)建View Model，但是引用Knockout之前，我們首先要引用Knockout的Js類庫（具體介紹請查看Knockout應(yīng)用開發(fā)指南的系列教程）
View model代碼如下：
var viewModel = {
Password: ko.observable(""),
Ocolor: "#eeeeee"
};
對于密碼強(qiáng)度以及顏色的值依賴于密碼字符串的值，所以我們需要為他們聲明依賴屬性，代碼如下：
viewModel.PasswordLevel = ko.dependentObservable(function () {
return Page.Utility.Registration.getPasswordLevel(this.Password());
}, viewModel);
viewModel.Lcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第一個(gè)格顯示的背景色
return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))
}, viewModel);
viewModel.Mcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色
return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
}, viewModel);
viewModel.Hcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第三個(gè)格顯示的背景色
return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
}, viewModel);
然后使用applyBindings方法將view model綁定到該頁面，你可以使用jQuery的ready函數(shù)來執(zhí)行該綁定代碼，也可以在頁面最下方執(zhí)行綁定代碼，我們這里使用了jQuery，代碼如下：
$((function () {
ko.applyBindings(viewModel);
}));
最后，我們再看看這些值怎么動(dòng)態(tài)綁定到HTML元素上的，請查看如下代碼（其中使用了afterkeydown代替了onKeyUp和onBlur）：
<form name="form1" action="">
輸入密碼:
<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
<br>
密碼強(qiáng)度:
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
height="23" style='display: inline'>
<tr align="center" bgcolor="#eeeeee">
<td width="50"data-bind="style: { backgroundColor: Lcolor }">弱</td>
<td width="50"data-bind="style: { backgroundColor: Mcolor }">中</td>
<td width="50"data-bind="style: { backgroundColor: Hcolor }">強(qiáng)</td>
</tr>
</table>
</form>
然后就OK，運(yùn)行代碼查看，一模一樣的功能展示出來了。
如果去掉為驗(yàn)證而改善的代碼，總代碼肯定是比原有的方式少的。
完整版代碼如下：
View Code
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<script type="text/javascript" src="http://knockoutjs.com/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/jquery.tmpl.js"></script>
<script type="text/javascript" src="http://knockoutjs.com/js/knockout-1.2.1.js"></script>
</head>
<body>
<script type="text/javascript">
var Page = Page || {};
Page.Utility = Page.Utility || {};
Page.Utility.Registration = Page.Utility.Registration || {};
//獲取密碼強(qiáng)度
Page.Utility.Registration.getPasswordLevel =function (password) {
if (password ==null|| password =='')
return0;
if (password.length <=4)
return0; //密碼太短
var Modes =0;
for (i =0; i < password.length; i++) {
Modes |= CharMode(password.charCodeAt(i));
}
return bitTotal(Modes);
//CharMode函數(shù)
function CharMode(iN) {
if (iN >=48&& iN <=57) //數(shù)字
return1;
if (iN >=65&& iN <=90) //大寫字母
return2;
if (iN >=97&& iN <=122) //小寫
return4;
else
return8; //特殊字符
}
//bitTotal函數(shù)
function bitTotal(num) {
modes =0;
for (i =0; i <4; i++) {
if (num &1) modes++;
num >>>=1;
}
return modes;
}
};
var viewModel = {
Password: ko.observable(""),
Ocolor: "#eeeeee"
};
viewModel.PasswordLevel = ko.dependentObservable(function () {
return Page.Utility.Registration.getPasswordLevel(this.Password());
}, viewModel);
viewModel.Lcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第一個(gè)格顯示的背景色
returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))
}, viewModel);
viewModel.Mcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色
returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")
}, viewModel);
viewModel.Hcolor = ko.dependentObservable(function () {
//根據(jù)密碼強(qiáng)度判斷第二個(gè)格顯示的背景色
returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00"
}, viewModel);
$((function () {
ko.applyBindings(viewModel);
}));
</script>
<form name="form1" action="">
輸入密碼:<input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
<br>
密碼強(qiáng)度:
<table width="217" border="1" cellspacing="0" cellpadding="1" bordercolor="#cccccc"
height="23" style='display: inline'>
<tr align="center" bgcolor="#eeeeee">
<td width="50" id="strength_L" data-bind="style: { backgroundColor: Lcolor }">
弱
</td>
<td width="50" id="strength_M" data-bind="style: { backgroundColor: Mcolor }">
中
</td>
<td width="50" id="strength_H" data-bind="style: { backgroundColor: Hcolor }">
強(qiáng)
</td>
</tr>
</table>
</form>
</body>
</html>
浙公網(wǎng)安備 33010602011771號