管理资源吧首页>>>教程>>>编程>>>JavaScript教程>>>

用Javascript评估用户输入密码的强度（Knockout版）

　　我们来看看如果使用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++) {

　　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应用开发指南的系列教程）

　　代码如下：

　　

复制代码 代码如下:

　　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，运行代码查看，一模一样的功能展示出来了。

　　如果去掉为验证而改善的代码，总代码肯定是比原有的方式少的。

　　完整版代码如下：

　　

复制代码 代码如下:

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

教程首页 更多教程