我们来看看如果使用Knockout更简单的来实现密码强度的验证。
原有代码请查看:
- <!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函数
- function CharMode(iN) {
- if (iN >=48&& iN <=57) //数字
- return1;
- if (iN >=65&& iN <=90) //大写字母
- return2;
- if (iN >=97&& iN <=122) //小写
- return4;
- else
- return8; //特殊字符
- }
- //bitTotal函数
- function bitTotal(num) {
- modes =0;
- for (i =0; i <4; i++) {
- if (num &1) modes++;
- num >>>=1;
- }
- return modes;
- }
- //checkStrong函数
- 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函数
- 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>
- 密码强度:
- <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">
- 强
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>
首先我们来改善一下上面博友的验证函数为如下代码:
- var PagePage = Page || {};
- PagePage.Utility = Page.Utility || {};
- PagePage.Utility.Registration = Page.Utility.Registration || {};
- //获取密码强度
- 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函数
- function CharMode(iN) {
- if (iN >= 48 && iN <= 57) //数字
- return 1;
- if (iN >= 65 && iN <= 90) //大写字母
- return 2;
- if (iN >= 97 && iN <= 122) //小写
- return 4;
- else
- return 8; //特殊字符
- }
- //bitTotal函数
- function bitTotal(num) {
- modes = 0;
- for (i = 0; i < 4; i++) {
- if (num & 1) modes++;
- num >>>= 1;
- }
- return modes;
- }
- };
然后来创建View Model,但是引用Knockout之前,我们首先要引用Knockout的Js类库(具体介绍请查看Knockout应用开发指南的系列教程)
View model代码如下:
- 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() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")
- }, viewModel);
- viewModel.Hcolor = ko.dependentObservable(function () {
- //根据密码强度判断第三个格显示的背景色
- return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"
- }, viewModel);
然后使用applyBindings方法将view model绑定到该页面,你可以使用jQuery的ready函数来执行该绑定代码,也可以在页面最下方执行绑定代码,我们这里使用了jQuery,代码如下:
- $((function () {
- ko.applyBindings(viewModel);
- }));
最后,我们再看看这些值怎么动态绑定到HTML元素上的,请查看如下代码(其中使用了afterkeydown代替了onKeyUp和onBlur):
- <form name="form1" action="">
- 输入密码:
- <input type="text" size="10" data-bind="value:Password, valueUpdate: 'afterkeydown'">
- <br>
- 密码强度:
- <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 }">强</td>
- </tr>
- </table>
- </form>
然后就OK,运行代码查看,一模一样的功能展示出来了。
如果去掉为验证而改善的代码,总代码肯定是比原有的方式少的。
完整版代码如下:
- <!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 PagePage = Page || {};
- PagePage.Utility = Page.Utility || {};
- PagePage.Utility.Registration = Page.Utility.Registration || {};
- //获取密码强度
- 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函数
- function CharMode(iN) {
- if (iN >=48&& iN <=57) //数字
- return1;
- if (iN >=65&& iN <=90) //大写字母
- return2;
- if (iN >=97&& iN <=122) //小写
- return4;
- else
- return8; //特殊字符
- }
- //bitTotal函数
- 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 () {
- //根据密码强度判断第一个格显示的背景色
- returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))
- }, viewModel);
- viewModel.Mcolor = ko.dependentObservable(function () {
- //根据密码强度判断第二个格显示的背景色
- returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")
- }, viewModel);
- viewModel.Hcolor = ko.dependentObservable(function () {
- //根据密码强度判断第二个格显示的背景色
- 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>
- 密码强度:
- <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 }">
- 强
- </td>
- </tr>
- </table>
- </form>
- </body>
- </html>