JavaScript如何实现注册时密码强度校验

时间：2020-03-07 17:15:22
2591人关注

这篇文章主要为大家详细介绍了JavaScript注册时密码强度校验代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，另外这篇文章主要知识点是关于js、密码强度校验、javascript的内容，如果大家想对相关知识点有系统深入的学习，可以参阅以下电子资料：

教程详情	电子资料
教程类别：javascript 编辑整理：武国英教程字数：2147字节阅读时间：大概11分钟下载本教程（DOC版）	《Vue.js前端开发基础与项目实战》项目源码 JSON-handle Quick Javascript Switcher Vue.js devtools JSON Formatter

密码强度有4个状态，分别如下图。

无密码状态

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

密码低级状态

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

密码中级状态

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

密码高级状态

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

实现的代码主要如下：

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实现倒计时关键代码

下一篇：JavaScript实现飘落星星特效的代码详解