用JavaScript評估用戶輸入密碼的強(qiáng)度（Knockout版）

作者：湯姆大叔 2011-12-05 15:21:58

使用Knockout更簡單的來實(shí)現(xiàn)密碼強(qiáng)度的驗(yàn)證。

早上看到博友6點(diǎn)多發(fā)的一篇關(guān)于密碼強(qiáng)度的文章（連接），甚是感動（周末大早上還來發(fā)文）。

我們來看看如果使用Knockout更簡單的來實(shí)現(xiàn)密碼強(qiáng)度的驗(yàn)證。

原有代碼請查看：

<!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 PagePage = Page || {};  
PagePage.Utility = Page.Utility || {};  
PagePage.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)度判斷***個格顯示的背景色  
    return this.PasswordLevel() == 0 ? this.Ocolor : (this.PasswordLevel() == 1 ? "#FF0000" : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00"))  
}, viewModel);  
 
viewModel.Mcolor = ko.dependentObservable(function () {  
    //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色  
    return this.PasswordLevel() < 2 ? this.Ocolor : (this.PasswordLevel() == 2 ? "#FF9900" : "#33CC00")  
}, viewModel);  
 
viewModel.Hcolor = ko.dependentObservable(function () {  
    //根據(jù)密碼強(qiáng)度判斷第三個格顯示的背景色  
    return this.PasswordLevel() < 3 ? this.Ocolor : "#33CC00"  
}, viewModel);

然后使用applyBindings方法將view model綁定到該頁面，你可以使用jQuery的ready函數(shù)來執(zhí)行該綁定代碼，也可以在頁面最下方執(zhí)行綁定代碼，我們這里使用了jQuery，代碼如下：

$((function () {  
    ko.applyBindings(viewModel);  
}));

***，我們再看看這些值怎么動態(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)證而改善的代碼，總代碼肯定是比原有的方式少的。

完整版代碼如下：

<!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 || {};  
 
        //獲取密碼強(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)度判斷***個格顯示的背景色  
returnthis.PasswordLevel() ==0?this.Ocolor : (this.PasswordLevel() ==1?"#FF0000" : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00"))  
        }, viewModel);  
 
        viewModel.Mcolor = ko.dependentObservable(function () {  
            //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色  
returnthis.PasswordLevel() <2?this.Ocolor : (this.PasswordLevel() ==2?"#FF9900" : "#33CC00")  
        }, viewModel);  
 
        viewModel.Hcolor = ko.dependentObservable(function () {  
            //根據(jù)密碼強(qiáng)度判斷第二個格顯示的背景色  
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>