用Javascript評估用戶輸入密碼的強度（Knockout版）

時間 2020-07-06

標籤 javascript 評估用戶輸入密碼強度 knockout 欄目 JavaScript 简体版

原文原文鏈接

看到博友6點多發的一篇關於密碼強度的文章（鏈接），甚是感動（週末大早上還來發文）。javascript

咱們來看看若是使用Knockout更簡單的來實現密碼強度的驗證。html

原有代碼請查看：java

<!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代碼以下：jquery

var viewModel = {
    Password: ko.observable(""),
    Ocolor: "#eeeeee"
};

對於密碼強度以及顏色的值依賴於密碼字符串的值，因此咱們須要爲他們聲明依賴屬性，代碼以下：app

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）：this

<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，運行代碼查看，如出一轍的功能展現出來了。spa

若是去掉爲驗證而改善的代碼，總代碼確定是比原有的方式少的。code

完整版代碼以下：orm

<!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>