用Javascript评估用户输入密码的强度（Knockout版）
2024-05-06 14:22:59
供稿：网友
我们来看看如果使用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++) {
