密码强度检测效果实现原理与代码
密码强度检测效果实现原理与代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:密码强度检测效果functionchkpwd(obj){vart=obj.value;varid=getResult(t)...

复制代码 代码如下:

<html>

<head>

<title>密码强度检测效果</title>

<script type="text/javascript">

function chkpwd(obj){

var t=obj.value;

var id=getResult(t);

//定义对应的消息提示

var msg=new Array(4);

msg[0]="密码过短。";

msg[1]="密码强度差。";

msg[2]="密码强度良好。";

msg[3]="密码强度高。";

var sty=new Array(4);

sty[0]=-45;

sty[1]=-30;

sty[2]=-15;

sty[3]=0;

var col = new Array(4);

col[0] = "gray";

col[1] = "#50AEDD";

col[2] = "#FF8213";

col[3] = "green";

//设置显示效果

var bImg="http://download.jz123.cn/sc/pwdlen_dSIPeEGQWxfO.gif" //一张显示用的图片

var sWidth=300;

var sHeight=15;

var Bobj=document.getElementById("chkResult");

Bobj.style.fontSize="12px";

Bobj.style.color=col[id];

Bobj.style.width=sWidth + "px";

Bobj.style.height=sHeight + "px";

Bobj.style.lineHeight=sHeight + "px";

Bobj.style.background="url(" + bImg + ") no-repeat left " + sty[id] + "px";

Bobj.style.textIndent="20px";

Bobj.innerHTML="检测提示:" + msg[id];

}

//定义检测函数,返回0/1/2/3分别代表无效/差/一般/强

function getResult(s){

if(s.length < 4){

return 0;

}

var ls = 0;

if (s.match(/[a-z]/ig)){

ls++;

}

if (s.match(/[0-9]/ig)){

ls++;

}

if (s.match(/(.[^a-z0-9])/ig)){

ls++;

}

if (s.length < 6 && ls > 0){

ls--;

}

return ls

}

</script>

</head>

<body>

告诉你一个应有尽有的网页特效网址:http://www.jb51.net/list/list_43_1.htm

<form name="form1">

<label for="pwd">用户密码</label>

<input type="password" name="pwd" onKeyUp="chkpwd(this)" />

<div id="chkResult"></div>

</form>

</body>

</html>

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类