密码强度有4个状态,分别如下图。
无密码状态
密码低级状态
密码中级状态
密码高级状态
实现的代码主要如下:
HTML代码
<input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)"> <table border="0" cellpadding="0" cellspacing="0"> <tr align="center"> <td id="pwd_Weak" class="pwd pwd_c"> </td> <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td> <td id="pwd_Strong" class="pwd pwd_c pwd_c_r"> </td> </tr> </table>
CSS代码
.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;} .pwd_f{color:#BBBBBB;} .pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;} .pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;} .pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;} .pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;} .pwd_c_r{border-right:1px solid #D0D0D0;} .pwd_Weak_c_r{border-right:1px solid #BB2B2B;} .pwd_Medium_c_r{border-right:1px solid #E9AE10;} .pwd_Strong_c_r{border-right:1px solid #267A12;}
JS代码
function CheckIntensity(pwd) { var Mcolor, Wcolor, Scolor, Color_Html; var m = 0; //匹配数字 if (/\d+/.test(pwd)) { debugger; m++; }; //匹配字母 if (/[A-Za-z]+/.test(pwd)) { m++; }; //匹配除数字字母外的特殊符号 if (/[^0-9a-zA-Z]+/.test(pwd)) { m++; }; if (pwd.length <= 6) { m = 1; } if (pwd.length <= 0) { m = 0; } switch (m) { case 1: Wcolor = "pwd pwd_Weak_c"; Mcolor = "pwd pwd_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "弱"; break; case 2: Wcolor = "pwd pwd_Medium_c"; Mcolor = "pwd pwd_Medium_c"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "中"; break; case 3: Wcolor = "pwd pwd_Strong_c"; Mcolor = "pwd pwd_Strong_c"; Scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; Color_Html = "强"; break; default: Wcolor = "pwd pwd_c"; Mcolor = "pwd pwd_c pwd_f"; Scolor = "pwd pwd_c pwd_c_r"; Color_Html = "无"; break; } document.getElementById('pwd_Weak').className = Wcolor; document.getElementById('pwd_Medium').className = Mcolor; document.getElementById('pwd_Strong').className = Scolor; document.getElementById('pwd_Medium').innerHTML = Color_Html; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
标签:
js,注册,密码强度
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“JavaScript注册时密码强度校验代码”评论...
稳了!魔兽国服回归的3条重磅消息!官宣时间再确认!
昨天有一位朋友在大神群里分享,自己亚服账号被封号之后居然弹出了国服的封号信息对话框。
这里面让他访问的是一个国服的战网网址,com.cn和后面的zh都非常明白地表明这就是国服战网。
而他在复制这个网址并且进行登录之后,确实是网易的网址,也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情,因为以前都没有出现这样的情况,现在突然提示跳转到国服战网的网址,是不是说明了简体中文客户端已经开始进行更新了呢?