|
功能说明在用户注册或更改密码时根据用户输入进行检测并返回结果能有效地提醒用户提高帐号的安全性 类似效果中的修改密码功能 运行代码框 简单预览 <html> <head> <meta httpequiv=ContentType content=text/html; charset=utf /> <title>密码</title> <style type=text/css> body{ fontsize:px; fontfamily: Arial Helvetica sansserif; margin:; } form{ margin:em; } #chkResult{marginleft:px;height:px;} </style> </head> <body> <form name=form> <label for=pwd>用户密码</label> <input type=password name=pwd onblur=chkpwd(this) /> <div id=chkResult></div> <label for=pwd>重复密码</label> <input type=password name=pwd /> </form> <script type=text/javascript> function chkpwd(obj){ var t=objvalue; var id=getResult(t); //定义对应的消息提示 var msg=new Array(); msg[]=密码过短; msg[]=密码强度差; msg[]=密码强度良好; msg[]=密码强度高; var sty=new Array(); sty[]=; sty[]=; sty[]=; sty[]=; var col=new Array(); col[]=gray; col[]=red; col[]=#ff; col[]=Green; //设置显示效果 var bImg=_//gif;//一张显示用的图片 var sWidth=; var sHeight=; var Bobj=documentgetElementById(chkResult); BobjstylefontSize=px; lor=col[id]; Bobjstylewidth=sWidth + px; Bobjstyleheight=sHeight + px; BobjstylelineHeight=sHeight + px; Bobjstylebackground=url( + bImg + ) norepeat left + sty[id] + px; BobjstyletextIndent=px; BobjinnerHTML=检测提示 + msg[id]; } //定义检测函数返回///分别代表无效/差/一般/强 function getResult(s){ if(slength < ){ return ; } var ls = ; if (smatch(/[az]/ig)){ ls++; } if (smatch(/[]/ig)){ ls++; } if (smatch(/([^az])/ig)){ ls++; } if (slength < && ls > ){ ls; } return ls } </script> </body> </html> 使用方法 第一步保存图片 第二步根据您的需要修改js文件中该图片地址如下所示 varbImg=pwdlengif;//一张显示用的图片 第三步在需要检测的页面中引用这个脚本文件如下所示 <scripttype=text/javascriptsrc=chkpwdjs></script> 第四步在网页的表单中找到密码输入框添加onblur事件驱动然后添加一个Div如下所示 <inputtype=passwordname=pwdonblur=chkpwd(this)/> <divid=chkResult>强度检测</div> 第五步根据您页面的需要通过样式表CSS重新定义#chkResult的摆放位置以合适您网页的整体布局 |
