当前位置:编程学习 > JAVA >>

用Javascript评估用户输入密码的强度(Knockout版)

 

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

我们来看看如果使用Knockout更简单的来实现密码强度的验证。

原有代码请查看:

  View Code

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

              

补充:web前端 , JavaScript ,
CopyRight © 2012 站长网 编程知识问答 www.zzzyk.com All Rights Reserved
部份技术文章来自网络,