用户体验之密码强度提示 --JavaScript/Ajax--编程设计网

=波波日志 > JavaScript/Ajax > 用户体验之密码强度提示 =

[转]用户体验之密码强度提示

功能说明：在用户注册或更改密码时，根据用户输入进行检测并返回结果。能有效地提醒用户提高帐号的安全性。

类似效果：Live.com中的修改密码功能

代码：

-HTML

<html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>密码</title>
 <style type="text/css">
 body{ font-size:12px; font-family: Arial, Helvetica, sans-serif; margin:0; } form{ margin:2em; }
 #chkResult{margin-left:53px;height:15px;}
 </style> 
 </head>
 <body>
 <form name="form1">
 <label for="pwd">用户密码</label>
 <input type="password" name="pwd" onblur="chkpwd(this)" />
 <div id="chkResult"></div> <label for="pwd2">重复密码</label>
 <input type="password" name="pwd2" />
 </form>
 <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]="red";
 col[2]="#ff6600";
 col[3]="Green"; //设置显示效果
 var bImg="attachments/month_0612/v200612702136.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> 
 </body>
 </html> 

类别：JavaScript/Ajax　作者：转载　日期：2009-11-18　【评论：0】　

上一篇：本站点中软件推荐的Js效果　
下一篇：30种时尚的CSS网站导航条

暂时没有评论！

发表留言

热门博文