JavaScript注册时密码强度校验代码
程序员文章站
2023-12-28 18:58:16
密码强度有4个状态,分别如下图。
无密码状态
密码低级状态
密码中级状态
密码高级状态
实现的代码主要如下:
html代码
密码强度有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; }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。