时间:2021-05-26
密码强度有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; }以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
先看效果图:javascript密码强度校验代码,具体实现思路不多说了,请看下面代码和demo。第一种方法:/**密码安全程度*return:全部为字母或者数字
本文实例讲述了JavaScript动态检测密码强度原理及实现方法。分享给大家供大家参考,具体如下:在注册账户,设置密码时,会出现密码强度动态检测,网上看了一些帖
主要介绍使用jQuery实现带有校验密码强度的注册页面,当然要想生成一个漂亮的带有密码强度检验的注册页面要有相关插件和类库配合,具体内容如下:相关的插件和类库c
本文实例讲述了jQuery实现注册会员时密码强度提示信息功能。分享给大家供大家参考,具体如下:1.效果如图所示:2.html代码:设置密码:*密码强度3.jqu
一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式