 
<!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) //大寫(xiě)字母 
return2; 
if (iN >=97&& iN <=122) //小寫(xiě) 
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> 

首先我們來(lái)改善一下上面博友的驗(yàn)證函數(shù)為如下代碼：

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

 
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) //大寫(xiě)字母 
return 2; 
if (iN >= 97 && iN <= 122) //小寫(xiě) 
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; 
} 
}; 

然后來(lái)創(chuàng)建View Model，但是引用Knockout之前，我們首先要引用Knockout的Js類(lèi)庫(kù)（具體介紹請(qǐng)查看Knockout應(yīng)用開(kāi)發(fā)指南的系列教程）
代碼如下：

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

 
var viewModel = { 
Password: ko.observable(""), 
Ocolor: "#eeeeee" 
}; 
對(duì)于密碼強(qiáng)度以及顏色的值依賴(lài)于密碼字符串的值，所以我們需要為他們聲明依賴(lài)屬性，代碼如下： 
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綁定到該頁(yè)面，你可以使用jQuery的ready函數(shù)來(lái)執(zhí)行該綁定代碼，也可以在頁(yè)面最下方執(zhí)行綁定代碼，我們這里使用了jQuery，代碼如下： 
$((function () { 
ko.applyBindings(viewModel); 
})); 

最后，我們?cè)倏纯催@些值怎么動(dòng)態(tài)綁定到HTML元素上的，請(qǐng)查看如下代碼（其中使用了afterkeydown代替了onKeyUp和onBlur）：

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

 
<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)行代碼查看，一模一樣的功能展示出來(lái)了。
如果去掉為驗(yàn)證而改善的代碼，總代碼肯定是比原有的方式少的。
完整版代碼如下：

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

 
<!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) //大寫(xiě)字母 
return2; 
if (iN >=97&& iN <=122) //小寫(xiě) 
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> 

您可能感興趣的文章:

相關(guān)文章

這篇文章主要介紹了微信小程序開(kāi)發(fā)返回上一級(jí)頁(yè)面并刷新操作,結(jié)合實(shí)例形式詳細(xì)分析了微信小程序返回上一級(jí)頁(yè)面并刷新操作方法技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下
2020-06-06

Javascript實(shí)現(xiàn)的CSS代碼高亮顯示

到網(wǎng)上一位別出心裁的高手使用字符串而不是正則表達(dá)式實(shí)現(xiàn)了Javascript代碼高亮顯示，自己受益匪淺，于是就構(gòu)思了CSS代碼的高亮顯示。

2009-11-11

JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑

這篇文章主要介紹了JavaScript中使用typeof運(yùn)算符需要注意的幾個(gè)坑,本文總結(jié)了4個(gè)使用typeof運(yùn)算符要注意的問(wèn)題,需要的朋友可以參考下

2014-11-11

javascript中createElement的兩種創(chuàng)建方式

這篇文章主要介紹了javascript中createElement的兩種創(chuàng)建方式,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

2015-05-05

js window.event對(duì)象詳盡解析

最近因?yàn)楣ぷ餍枰撕枚嗵斓膉s了，老婆一問(wèn)我在弄 ajax, 一問(wèn)我在弄js，她都聽(tīng)得沒(méi)有一點(diǎn)興趣了，我自己感覺(jué)還好，畢竟做出來(lái)了東西就有成就感吧，這里把幾個(gè)有用但是不常見(jiàn)的東西貼出來(lái)供大家參考參考

2009-02-02