韦德国际1946国际网址:用Javascript评估用户输入密

作者: 韦德国际1946国际网址  发布:2019-08-05

笔者们来探视假如利用Knockout更简短的来达成密码强度的印证。
村生泊长代码请查看:

 

复制代码 代码如下:

1.如若密码少于5位,那么就觉着那是一个弱密码。

韦德国际1946国际网址:用Javascript评估用户输入密码的强度。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<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; //特殊字符
韦德国际1946国际网址,}
//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>

2.假设密码只由数字、小写字母、大写字母或别的特殊符号当中的一种组成,则以为这是三个弱密码。

先是我们来改正一下上边博友的表明函数为如下代码:

3.即便密码由数字、小写字母、大写字母或其他特殊符号当中的二种组成,则以为那是三个中度安全的密码。

复制代码 代码如下:

4.假若密码由数字、小写字母、大写字母或任何特殊符号在那之中的三种以上整合,则以为那是三个相比较安全的密码。<script language="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;
}
};

//CharMode函数function CharMode(iN){

接下来来制造View Model,然而援引Knockout在此以前,我们先是要引用Knockout的Js类库(具体介绍请查看Knockout应用开拓指南的三种教程)
代码如下:

if (iN>=48 && iN <=57) //数字

复制代码 代码如下:

return 1;

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);
}));

if (iN>=65 && iN <=90) //大写字母www.2cto.com

最后,大家再看看这个值怎么动态绑定到HTML元素上的,请查看如下代码(个中使用了afterkeydown代替了onKeyUp和onBlur):

return 2;

复制代码 代码如下:

if (iN>=97 && iN <=122) //小写

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

return 4;

下一场就OK,运维代码查看,大同小异的功力浮现出来了。
万一去掉为表明而更进一竿的代码,总代码明确是比原本的秘籍少的。
全体版代码如下:

else

复制代码 代码如下:

return 8; //特殊字符//bitTotal函数function bitTotal(num){

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" ";
<html>
<head>
<script type="text/javascript" src=";
<script type="text/javascript" src=";
<script type="text/javascript" src=";
</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>

modes=0;

你也许感兴趣的文章:

  • js仿支付宝填写支付密码作用落实多方框输入密码
  • JavaScript落到实处输入框(密码框)出现提醒语
  • JavaScript仿支付宝密码输入框
  • JavaScript咋样促成在文本框(密码框)输入提示语
  • js检查评定用户输入密码强度
  • 输入密码检验大写是不是锁定js实现代码
  • javascript贯彻仿银行密码输入框效果的代码
  • JS完结八人字符密码输入器功效

for (i=0;i<4;i ){

if (num & 1) modes ;

num>>>=1; return modes; //checkStrong函数function checkStrong(sPW){

if (sPW.length<=4)

return 0; //密码太短

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) {

case 0:

本文由韦德国际1946发布于韦德国际1946国际网址,转载请注明出处:韦德国际1946国际网址:用Javascript评估用户输入密

关键词: 伟德国际