当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript注册时密码强度校验代码

JavaScript注册时密码强度校验代码

2017年12月12日  | 移动技术网IT编程  | 我要评论

密码强度有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;
  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网