www.qitongnet.com改善用户体验之密码强度提示_网站制作 -网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

北京网站设计DIV CSS网页制作之不规则文字排版的CSS样式
 北京网页设计脚本控制三行三列自适应高度DIV布局
 北京网页设计实战Dreamweaver MX技巧之超链接
 北京网站设计用 iframe 解决下拉框与层之冲突
 北京网站建设关于Dreamweaver乱码问题的解决方案
 北京网页设计关于控制影片的播放和倒退
 企通互联用Dreamweaver实现Real与网页结合
 北京网页设计DreamWeaver,经典50问(2)
企通互联动态加载外部css或js文件
 www.qitongnet.com为什么用CSS定义overflow属性没有效果？

品牌理念

北京网站建设最佳合作伙伴
北京网站建设专家企通互联
竭诚为您提供网站建设服务!

友好连接

文章搜索

你的位置：首页 >> 网站制作 >> www.qitongnet.com改善用户体验之密码强度提示

www.qitongnet.com改善用户体验之密码强度提示

作者：北京网站建设日期：2008-03-27 06:03:35 来源： http://www.qitongnet.com

资深北京网站建设公司企通互联,专业致力于北京网站建设,北京网站制作,北京网站设计,北京网页设计领域,千余网站建设案例，公司拥有国内一流的网站建设、网站制作、网页设计团队，如果您已经有网站的网站建设,看看我们精美的网站建设案例也无妨.北京网站建设网址：http://www.qitongnet.com =======================================================================================

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

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

简单预览：

运行代码框 www.qitongnet.com网站制作
<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"> <a href="http://www.qitongnet.com" target="_blank">网页设计</a>用户密码</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="/Article/UploadFiles/200612/20061213085107727.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分别代表无效/ <a href="http://www.qitongnet.com" target="_blank">北京网站建设</a>差/一般/强 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>企通互联
[Ctrl+A 全部选择北京网页设计提示：你可先修改部分代码，再按运行]

使用方法：

第一步：保存图片网站制作
第二步：根据您的需要修改js文件中该图片地址。如下所示：