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

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元素上的,请查看如下代码(其中使用了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,运行代码查看,一模一样的功能展示出来了。

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

版权声明:本文为博主http://www.zuiniusn.com原创文章,未经博主允许不得转载。

时间: 2024-10-26 09:53:57

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

使用JavaScript验证用户输入的是否为正整数

在项目开发中,需要使用JavaScript验证用户输入的是否为正整数. 方法一: var type="^[0-9]*[1-9][0-9]*$"; var r=new RegExp(type); var flag=r.test(subjectHour.value); if(!flag){ alert("课时应为正整数"); subjectHour.focus(); return false; } 方法二: var type="^[0-9]*[1-9][0-9

javascript 获取用户光标,插入文本

图1 如图1所示,点击[函数名称],将函数名称添加到表达式内容框中,点击参数名称,将参数名称index1作为方法的参数添加到表达式内容中的表达式中. 该功能实现主要是采用了javascript获取鼠标光标,在光标处插入方法名称和参数名称.javascript 代码如下. <script language="javascript" type="text/javascript"> /* @myField:要插入文本的HTML标签 @myValue:要插入文本

JavaScript经典代码【二】【javascript判断用户点了鼠标左键还是右键】

IE 下 onMouseDown 事件有个 events.button 可以返回一个数值,根据数值判断取得用户按了那个鼠标键 events.button==0 默认.没有按任何按钮. events.button==1 鼠标左键 events.button==2 鼠标右键 events.button==3 鼠标左右键同时按下 events.button==4 鼠标中键 events.button==5 鼠标左键和中键同时按下 events.button==6 鼠标右键和中键同时按下 events.

提示用户输入密码,如果密码是“888888”则提示正确,否则要求再输入一次,如果密码是“888888”则提示正确,否则提示错误,程序结束。

提示用户输入密码,如果密码是“888888”则提示正确,否则要求再输入一次,如果密码是“888888”则提示正确,否则提示错误,程序结束. Console.WriteLine("请输入密码"); string a = Console.ReadLine(); if (a == "888888") { Console.WriteLine("正确"); } else { Console.WriteLine("请在输入一遍"); st

Javascript Dom编程艺术(第2版)读书笔记

Javascript Dom编程艺术这本书我看的是第2版的,真心觉得这本书不错,它将DOM编程的一些基本原则,及如何让Javascript代码在浏览器不支持的情况下,或浏览器支持了Javascript但用户禁用它的情况下做到平衡退化,让最基本的操作仍能顺利完成,以及如何让结构与样式分享做到真正的渐近增强叙述得很清楚,也很容易理解接受.我也是看了这本书之后,才对代码优化,结构,行为,样式有了进一步的加深理解. Javascript Dom编程艺术(第2版)读书笔记,布布扣,bubuko.com

JavaScript DOM 编程艺术(第2版)---序中故

前言: 虽然已入行近乎一载,却还是对自己所处的职业-前端,模模糊糊,浑浑噩噩.故,不求鹤立独群,但略知一二.从<JavaScript DOM 编程艺术(第2版)>入手,打一打基础的同时,了解一下行业发展历史.多一些不明所以的坚持,少一丝追名逐利的执念. 明确词语含义: (X)HTML,DHTML 从知乎上扒来的图片: 图片出处:HTML4,HTML5,XHTML 之间有什么区别? "浏览器嗅探":用来探测浏览器的具体品牌和具体版本的测试及分支代码 DOM(Document

linux用户管理命令之NBA版

用户管理命令之NBA版 本文纯属扯淡,如有不严谨之处,还请海涵. 1 groupadd 作用:创建一个属组 格式:groupadd [选项] 属组名 选项:     -:选项为空 创建新属组,    -g:指定组GID,默认是GID+1 实例 1.1 添加属组team,指定组ID为1111     groupadd -g 1111 team 2 groupmod 作用:修改属组信息 格式:groupmod [选项] 属组名 选项:     -g:GID 修改属组GID -n:修改属组名 实例 2

nginx规则:自动降级,手机用户访问跳转手机版与PC版页面

工作中为满足业务需要以及保证服务的可用性,配置的一些nginx跳转规则,与公司业务相关信息已经抹去,提供出来希望对大家有帮助. 1. 当后端服务器出现异常,响应码为500 501 502 503 504,请求转发到静态降级服务器,从而保证业务不至于完全无法访问,对于浏览型且实时性要求不高的站点非常有用. app_servers:应用服务器,提供正常服务页面 shopwebstatic:静态服务器,提供定时爬取的静态页面 2.请求重试: proxy_next_upstream          

微信公众平台网页授权获取用户基本信息(VS.NET版)

一.前期准备工作 1.接口权限表点击修改[OAuth2.0网页授权].(读者可网上搜索什么是OAuth2.0) 注意:此处应填写与回调页面相同的域名. 2.编写正确的URL https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号APPID &redirect_uri= RedirectUri&response_type=code&scope=snsapi_userinfo&state=STATE#wecha