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

最新推荐文章于 2022-01-13 15:21:15 发布
最新推荐文章于 2022-01-13 15:21:15 发布
阅读量2.4k 收藏
点赞数 1
分类专栏： [06]JavaScript [08]Knockout 文章标签： knockout function jquery border action html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/TomXu2011/article/details/7016226
版权

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

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代码如下：

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

<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 == '')
                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>





TomXu2011
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
knockout表单验证的插件
10-19
自己看到的插件，觉得挺不错的，可以适用于开发中使用到knockout情况下的表单验证。
用Javascript评估用户输入密码的强度（Knockout版）
10-28
文件内容提到了使用Knockout框架来简化密码强度的验证实现。Knockout是一个流行的JavaScript库，它通过数据绑定和依赖追踪来使前端界面与数据模型同步。在Knockout版本中，可能通过定义一个更清晰的模型来管理密码...
MVVM架构~Knockoutjs系列之验证机制的引入
weixin_33777877的博客
01-06 119
返回目录 对于Knockoutjs本身来说，没有提供验证模块，不过，有第三方的扩展，就像你为jquery库作extensions一样，这讲中我将介绍一个Knockout插件扩展，knockout.validation.js，用它来实现对HTML标记的验证， 下面是它在Github上的地址https://github.com/Knockout-Contrib/Knockout-Validatio...
JS密码强度验证
u013244038的博客
08-12 377
无标题文档 window.onload = function () {   document.getElementById('button').onclick = function () { var abc=document.getElementById("abc").value; /** *可以任意结束验证 */ var reg1=/^[a-zA
Knockout Validation
tomcat的专栏
09-06 3318
Knockout 将View与Data进行双向绑定,在View上的数据改变能够自动反映到View所绑定的数据源上，同理，数据源的改变也能够立即反映到相关的View上。我们在使用Knockout的时候，还需要做的一个事情就是数据校验，在这方面，Knockout提供了很好的校验机制。 1.下载安装 下载之后我们的工程的javascript目录下面就有了knockout.js及knockou
description_Knockout_验证_
09-30
在Knockout.js中，实现数据验证有多种方法，本文将深入探讨其验证机制。 首先，让我们理解MVVM模式。在Knockout.js中，ViewModel是连接视图和模型的桥梁，它包含业务逻辑和数据状态，同时可以通过数据绑定与视图...
认识Knockout及如何使用Knockout绑定上下文
09-03
3. **高度可扩展性**：Knockout允许开发者轻松创建自定义的绑定，只需要少量的代码就能实现新的功能，增强了库的灵活性和适应性。 除了这三个主要特性，Knockout还有其他显著的优点： - **纯净的JavaScript代码**...
Knockout-Validation:Knockout JS的验证库
04-12
淘汰赛验证 用于模型和属性验证的KnockoutJS插件 贡献者： 还有很多！ 执照： 安装 凉亭 bower install knockout-validation --save NuGet PM > Install-Package Knockout.Validation NPM npm install knockout...
Knockout: 使用knockout validation插件进行校验, 给未通过校验的输入框添加红色边框突出显示....
weixin_34319374的博客
03-12 402
之前整理了三篇帖子: Knockout: 使用CSS绑定和event的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com/liuzhendong/p/3596267.htmlKnockout: 实践CSS绑定和jQuery的blur失去焦点事件, 给未通过校验的输入框添加红色边框突出显示. http://www.cnblogs.com...
MVVM架构~knockoutjs系列之从Knockout.Validation.js源码中学习它的用法
weixin_33811961的博客
03-11 133
返回目录 说在前 有时，我们在使用一个插件时，在网上即找不到它的相关API，这时，我们会很抓狂的，与其抓狂，还不如踏下心来，分析一下它的源码，事实上，对于JS这种开发语言来说，它开发的插件的使用方法都在它的源码里，只要你踏下心去看，一切就都有了！ Knockout.Validation.js是为Knockout插件服务的，它可以为Knockout对象进行验证，就像你使用MVC模型验证一样，而...
knockout-validation
静以修身，方致远
08-25 1244
1、引入~/Scripts/knockout.validation.js"> 2、在Scripts文件夹下创建zh-CN.js，用来汉化。 ko.validation.localize({     required: '必填字段',     min: '输入值必须大于等于 {0}',     max: '输入值必须小于等于 {0}',     minLength: '至少输入 {0}
MVVM架构~knockoutjs系列之表单添加（验证）与列表操作源码开放
weixin_33720956的博客
03-19 135
返回目录 本文章应该是knockoutjs系列的最后一篇了，前几篇中主要讲一些基础知识，这一讲主要是一个实际的例子，对于一个对象的添加与编辑功能的实现，并将项目源代码公开了，共大家一起学习！ knockoutjs系列目录 MVVM架构~Knockoutjs系列之text,value,attr,visible,with的数据绑定 MVVM架构~Knockoutjs系列之对象与对象组合 MV...
js 前端密码强度检测zxcvbn的使用（含react示例）
在下月亮有何贵干
01-13 5032
目录下载包在页面引入并使用结合h5的meter标签 下载包 yarn add zxcvbn 或 npm i zxcvbn -S 在页面引入并使用 import zxcvbn from 'zxcvbn'; zxcvbn是个函数，入参是字符串也就是用于检测的密码。 zxcvbn('123456abc!!!') 函数返回一个对象： 其中与密码强度相关的有guesses、guesses_log10、score。 guesses数据比较大不好判断。 score得分只有0~4整数范围没有小数，变化不够丰富，但
C#中判断密码字符强度 并设置对应颜色
chr23899的专栏
10-27 4418
C#中判断密码字符强度 并设置对应颜色 判断字符强度并返回等级1-
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值