使用Knockout实现密码强度的验证功能

最新推荐文章于 2024-07-20 23:54:17 发布

iteye_9378

最新推荐文章于 2024-07-20 23:54:17 发布

阅读量108

点赞数

文章标签： javascript ViewUI

首先先封装密码强度的验证函数，代码如下：

然后来创建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元素上的，请查看如下代码：

然后就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 == '') 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; } }; 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); $((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>

iteye_9378

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用Knockout实现密码强度的验证功能

首先先封装密码强度的验证函数，代码如下：var Page = Page || {};Page.Utility = Page.Utility || {};Page.Utility.Registration = Page.Utility.Registration || {};//获取密码强度Page.Utility.Registration.getPasswordLevel = func...
复制链接

扫一扫