2025-02-15

 

早上看到博友6點多發的一篇關於密碼強度的文章(連接),甚是感動(周末大早上還來發文)。

我們來看看如果使用Knockout更簡單的來實現密碼強度的驗證。

原有代碼請查看:

  View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://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,運行代碼查看,一模一樣的功能展示出來瞭。

如果去掉為驗證而改善的代碼,總代碼肯定是比原有的方式少的。

 

完整版代碼如下:

  View Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "https://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

    <script type="text/javascript" src="https://knockoutjs.com/js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="https://knockoutjs.com/js/jquery.tmpl.js"></script>

    <script type="text/javascript" src="https://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>

  

作者 湯姆大叔

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *