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

赞 (0)

相关推荐

  • JS实现六位字符密码输入器功能

    JS实现六位字符密码输入器功能

    老规矩~ 上DEMO,过过瘾先:六位字符密码输入器 再上源码:六位字符密码输入器 从DEMO中我看可以看出,首先只能输入六个字符,并且仅允许输入数字,在输入六位数字完成之后会自动执行一个回调(DEMO中是将输入结果显示出来了) 一. 先说原理 首先呢,我们需要两个东东:其一是一个真是的输入框,即:真正处于焦点状态并获取用户输入的input:其二是一组伪输入框,即:并没有真正获取焦点,但只是显示了当前输入的值(当然啦,密码嘛,只有一个小黑点而已~). 其次呢,我们需要简单不惧一下,让着一组(6个)

  • js检测用户输入密码强度

    js检测用户输入密码强度

    一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式! 1. 如果输入的密码位数少于5位,那么就判定为弱. 2. 如果输入的密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则判定为弱. 3. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则判定为中. 4. 如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则判定为强. 先来看看这个实现的效

  • js仿支付宝填写支付密码效果实现多方框输入密码

    js仿支付宝填写支付密码效果实现多方框输入密码

    不知道怎么描述标题,先看截图吧,大致的效果就是一个框输入一位密码. 最开始实现的思路是一个小方框就是一个type为password的input,每输入一位自动跳到下一位,删除一位就自动跳到前一位,android上是OK的,很平滑也没有bug,但是ios上会出现键盘频繁调起和关闭,非常影响用户体验.原因估计是每个input会不断的focus和blur,每次focus会调起键盘,blur又会关闭键盘,so....此方案肯定不行了. PM非要实现这种效果,木有办法~拗不过,一句用户体验不好会让你没话说

  • 输入密码检测大写是否锁定js实现代码

    这个月都还没.必须要凑数. 网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写.提醒用户. 在下面的 input框里测试下吧!这段代码来之 <点我>. 不过我做了一点小改进. 主要对 已经激活input框的 大写锁定进行实时检测. 复制代码 代码如下: <div> <input class="text" name="passwd" id="loginPasswd" type="password&

  • JavaScript实现输入框(密码框)出现提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • JavaScript仿支付宝密码输入框

    JavaScript仿支付宝密码输入框

    现在很多时候大家付款的场景都是在手机上面,而随着H5页面的开发变得越来越方便,很多场景也从客户端搬到了浏览器中,其中支付这个场景就很自然的被放在了浏览器中.那么这样的输入框大家一定不会陌生吧: 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签. 并且给这个5个input设置display: inline-block 属性,同时用<!- ->来消除元素直接的margin

  • JavaScript如何实现在文本框(密码框)输入提示语

    有时候我们需要在登陆表单有一些提示语言,比如"请输入用户名"和"请输入密码"等语言,至于用户名好说,但是在密码框中出现"请输入密码"这样的语言就有点麻烦了,因为在密码框输入的内容不会以明码显示.如果动态的控制type属性的话就有兼容性问题,如果input已经存在于页面中的话,在IE8和IE8以下浏览器中,type属性是只读的.所以就得想其他办法,代码如下: <!DOCTYPE html> <html> <head&g

  • javascript实现仿银行密码输入框效果的代码

    javascript实现仿银行密码输入框效果的代码

    效果: 密码输入框 function rand() { return Math.floor(Math.random()*10); } var rangenum = new Array(); var tem; for (var i = 0; i"+rangenum[i]+" "); } document.writeln(" 退格清除 "); } function input(i) { var pwd=document.form.pwd.value; if (

  • 用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"

  • 用Javascript评估用户输入密码的强度实现代码

    1.如果密码少于5位,那么就认为这是一个弱密码. 2.如果密码只由数字.小写字母.大写字母或其它特殊符号当中的一种组成,则认为这是一个弱密码. 3.如果密码由数字.小写字母.大写字母或其它特殊符号当中的两种组成,则认为这是一个中度安全的密码. 4.如果密码由数字.小写字母.大写字母或其它特殊符号当中的三种以上组成,则认为这是一个比较安全的密码. 复制代码 代码如下: <script language="javascript"> //CharMode函数 function C

  • 用户输入密码的强度

    New Document //程序设计:环球万维,专业提供虚拟主机,域名注册服务 //网址:http://www.netInter.cn //本程序是环球万维原创程序,若需转载,请注明网址及出处,谢谢. //以上信息与文章正文是不可分割的一部分,所以如果您要转载本文章,您必须保留以上信息. //CharMode函数 //测试某个字符是属于哪一类. function CharMode(iN){ if (iN>=48 && iN =65 && iN =97 &&a

  • javascript 判断用户有没有操作页面

    javascript 判断用户有没有操作页面 用js判断用户有没有操作页面,我们所要做的就是整理我们的思路. 一.思路 用户有没有操作界面,我们可以从页面在规定时间内有没有触发事件去考虑.比如用户有没有点击,有没有按键,有没有滚动鼠标滚轴.用户有没有移动鼠标等等.如果用户没有进行这些操作,那么我们可以大概的认为用户没有操作页面.我们可以给一个定时器.来记录在规定时间内用户有没有触发这些事件.我直接贴代码,代码的具体含义,我就不再讲解,思路大概就是这样. 二.代码演示 <!DOCTYPE html

  • JavaScript禁止用户多次提交的两种方法

    [当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大.所以我们需要进行限制] [1]将提交按钮禁止 <html> <head> <script> //禁止默认行为 因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能 function preventDef(event){ event=event||window.event; if(event.preventDefault){ return even

  • JavaScript判断用户是否对表单进行了修改的方法

    本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用户是否要保存表单的内容,是非常有用的代码. function formIsDirty(form) { for (var i = 0; i < form.elements.length; i++) { var element = form.elements[i]; var type = element

  • 使用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限制用户只能输汉字中文的方法

    本文实例讲述了javascript限制用户只能输汉字中文的方法.分享给大家供大家参考.具体实现方法如下: 要验证函数时我们必须明白,如果是汉字,则字符串长度加2,如果用正则我们直接使用\\u4E00-\\u9FA5 即可解决. 一.Unicode检验汉字 复制代码 代码如下: function chkstrlen(str) { var strlen = 0; for(var i = 0;i < str.length; i++) { if(str.charCodeAt(i) > 255) //如

  • JavaScript 模拟用户单击事件

    JavaScript 模拟用户单击事件

    一开始,我想到了用jQuery的click()事件来触发超链接的单击事件(与trigger("click")一样的效果).结果发现不如人意. 实例如下: 效果图 IE: FireFox:   复制代码 代码如下: <h3>请单击"Click Me".测试提交按钮与超链接是否也被单击了.</h3>     <button id="btn">Click Me</button>     <form

随机推荐