知识大全改善用户体验制作实用密码强度提示

Posted 2022-07-19 密码

篇首语：我们一路走，一路被辜负，一路点燃希望，一路寻找答案。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全改善用户体验制作实用密码强度提示相关的知识，希望对你有一定的参考价值。

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

　　类似效果中的修改密码功能

　　运行代码框

　　简单预览

　　<><head><meta equiv= Content Type content= text/; charset=utf /><title>密码</title><style type= text/css >body font size: px; font family: Arial Helvetica sans serif; margin: ;form margin: em;#cResultmargin left: px;height: px;</style></head>

　　<body><form name= form > <label for= pwd >用户密码</label> <input type= password name= pwd onblur= cpwd(this) /> <div id= cResult ></div> <label for= pwd >重复密码</label> <input type= password name= pwd /></form><script type= text/javascript > function cpwd(obj) var t=obj value; 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=document getElementById( cResult );

　　Bobj style fontSize= px ; lor=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= px ; Bobj innerHTML= 检测提示 + msg[id]; //定义检测函数返回 / / / 分别代表无效/差/一般/强 function getResult(s) if(s length < ) return ; var ls = ; if (s match(/[a z]/ig)) ls++; if (s match(/[ ]/ig)) ls++; if (s match(/( [^a z ])/ig)) ls++; if (s length < && ls > ) ls ; return ls </script></body>

　　</>

　　使用方法

　　第一步保存图片

　　第二步根据您的需要修改js文件中该图片地址如下所示

var bImg= pwdlen gif ;//一张显示用的图片

　　第三步在需要检测的页面中引用这个脚本文件如下所示

　　第四步在网页的表单中找到密码输入框添加onblur事件驱动然后添加一个Div 如下所示

<input type= password name= pwd onblur= cpwd(this) /> <div id= cResult >强度检测</div> cha138/Article/program/Java/Javascript/201311/25448

知识大全 改善用户体验制作实用密码强度提示

知识大全改善用户体验制作实用密码强度提示