用Javascript评估用户输入密码的强度（Knockout版）

来源：互联网发布：恢复电脑数据的软件编辑：程序博客网时间：2024/06/11 07:09

早上看到博友6点多发的一篇关于密码强度的文章（连接），甚是感动（周末大早上还来发文）。

我们来看看如果使用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 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 <= 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 Page = Page || {};        Page.Utility = Page.Utility || {};        Page.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>

0 0