我们来看看如果使用knockout更简单的来实现密码强度的验证。
原有代码请查看：
复制代码 代码如下:
<script type="text/javascript"> <br>//CharMode函数 <br>function CharMode(iN) { <br>if (iN >=48&& iN <=57) //数字 <br>return1; <br>if (iN >=65&& iN <=90) //大写字母 <br>return2; <br>if (iN >=97&& iN <=122) //小写 <br>return4; <br>else <br>return8; //特殊字符 <br>} <br>//bitTotal函数 <br>function bitTotal(num) { <br>modes =0; <br>for (i =0; i <4; i++) { <br>if (num &1) modes++; <br>num >>>=1; <br>} <br>return modes; <br>} <br>//checkStrong函数 <br>function checkStrong(sPW) { <br>if (sPW.length <=4) <br>return0; //密码太短 <br>Modes =0; <br>for (i =0; i < sPW.length; i++) { <br>Modes |= CharMode(sPW.charCodeAt(i)); <br>} <br>return bitTotal(Modes); <br>} <br>//pwStrength函数 <br>function pwStrength(pwd) { <br>O_color ="#eeeeee"; <br>L_color ="#FF0000"; <br>M_color ="#FF9900"; <br>H_color ="#33CC00"; <br>if (pwd ==null|| pwd =='') { <br>Lcolor = Mcolor = Hcolor = O_color; <br>} else { <br>S_level = checkStrong(pwd); <br>switch (S_level) { <br>case0: <br>Lcolor = Mcolor = Hcolor = O_color; <br>case1: <br>Lcolor = L_color; <br>Mcolor = Hcolor = O_color; <br>break; <br>case2: <br>Lcolor = Mcolor = M_color; <br>Hcolor = O_color; <br>break; <br>default: <br>Lcolor = Mcolor = Hcolor = H_color; <br>} <br>document.getElementById("strength_L").style.background = Lcolor; <br>document.getElementById("strength_M").style.background = Mcolor; <br>document.getElementById("strength_H").style.background = Hcolor; <br>return; <br>} <br>} </script>
首先我们来改善一下上面博友的验证函数为如下代码：
复制代码 代码如下:
var Page = Page || {};
Page.Utility = Page.Utility || {};
Page.Utility.Registration = Page.Utility.Registration || {};
//获取密码强度
Page.Utility.Registration.getPasswordLevel = function (password) {
if (password == null || password == '')
return 0;
if (password.length return 0; //密码太短
var Modes = 0;
for (i = 0; i Modes |= CharMode(password.charCodeAt(i));
}
return bitTotal(Modes);
//CharMode函数
function CharMode(iN) {
if (iN >= 48 && iN return 1;
if (iN >= 65 && iN return 2;
if (iN >= 97 && iN return 4;
else
return 8; //特殊字符
}
//bitTotal函数
function bitTotal(num) {
modes = 0;
for (i = 0; i if (num & 1) modes++;
num >>>= 1;
}
return modes;
}
};
然后来创建View Model，但是引用Knockout之前，我们首先要引用Knockout的Js类库（具体介绍请查看Knockout应用开发指南的系列教程）
代码如下：
复制代码 代码如下:
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 () {
//根据密码强度判断第一个格显示的背景色
return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))
}, viewModel);
viewModel.Mcolor = ko.dependentObservable(function () {
//根据密码强度判断第二个格显示的背景色
return this.PasswordLevel() }, viewModel);
viewModel.Hcolor = ko.dependentObservable(function () {
//根据密码强度判断第三个格显示的背景色
return this.PasswordLevel() }, viewModel);
然后使用applyBindings方法将view model绑定到该页面，你可以使用jQuery的ready函数来执行该绑定代码，也可以在页面最下方执行绑定代码，我们这里使用了jQuery，代码如下：
$((function () {
ko.applyBindings(viewModel);
}));
最后，我们再看看这些值怎么动态绑定到HTML元素上的，请查看如下代码（其中使用了afterkeydown代替了onKeyUp和onBlur）：
复制代码 代码如下:
然后就OK，运行代码查看，一模一样的功能展示出来了。
如果去掉为验证而改善的代码，总代码肯定是比原有的方式少的。
完整版代码如下：
立即学习“Java免费学习笔记（深入）”；
复制代码 代码如下:
<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>
<script type="text/javascript"> <br>var Page = Page || {}; <br>Page.Utility = Page.Utility || {}; <br>Page.Utility.Registration = Page.Utility.Registration || {}; <br>//获取密码强度 <br>Page.Utility.Registration.getPasswordLevel =function (password) { <br>if (password ==null|| password =='') <br>return0; <br>if (password.length <=4) <br>return0; //密码太短 <br>var Modes =0; <br>for (i =0; i < password.length; i++) { <br>Modes |= CharMode(password.charCodeAt(i)); <br>} <br>return bitTotal(Modes); <br>//CharMode函数 <br>function CharMode(iN) { <br>if (iN >=48&& iN <=57) //数字 <br>return1; <br>if (iN >=65&& iN <=90) //大写字母 <br>return2; <br>if (iN >=97&& iN <=122) //小写 <br>return4; <br>else <br>return8; //特殊字符 <br>} <br>//bitTotal函数 <br>function bitTotal(num) { <br>modes =0; <br>for (i =0; i <4; i++) { <br>if (num &1) modes++; <br>num >>>=1; <br>} <br>return modes; <br>} <br>}; <br>var viewModel = { <br>Password: ko.observable(""), <br>Ocolor: "#eeeeee" <br>}; <br>viewModel.PasswordLevel = ko.dependentObservable(function () { <br>return Page.Utility.Registration.getPasswordLevel(this.Password()); <br>}, viewModel); <br>viewModel.Lcolor = ko.dependentObservable(function () { <br>//根据密码强度判断第一个格显示的背景色 <br>returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")) <br>}, viewModel); <br>viewModel.Mcolor = ko.dependentObservable(function () { <br>//根据密码强度判断第二个格显示的背景色 <br>returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00") <br>}, viewModel); <br>viewModel.Hcolor = ko.dependentObservable(function () { <br>//根据密码强度判断第二个格显示的背景色 <br>returnthis.PasswordLevel() <3?this.Ocolor : "#33CC00" <br>}, viewModel); <br>$((function () { <br>ko.applyBindings(viewModel); <br>})); <br></script>
