密码强度

密码强度

在登录注册页面中密码的强中弱的判断是最常见的，那么博主将分享一种方法，具体如下：

1.html代码

<span id="star">*</span> 密码：<input type="text" placeholder="请输入密码" id="inputId"> <span id="psId">不少于6位字符</span> <div id="passwordStrong"><span id="PSShow"></span></div> <span id="PSTip"></span>

2.css代码

span{ display: inline-block; } #star{ color: red; margin-right: 6px; vertical-align: middle; } #passwordStrong{ width: 220px; border: 1px solid rgb(102, 100, 100); height: 20px; border-radius: 4px; margin-top: 20px; display: none; } #PSShow{ border-radius: 3px; } #psId{ font-size: 14px; color: rgb(245, 68, 77); margin-left: 10px; display: none; } .weakId{ width: 25%; height: 100%; background: red; } .middleId{ width: 50%; height: 100%; background: orange; } .strongId{ width: 75%; height: 100%; background: blue; } .overStrongId{ width: 100%; height: 100%; background: green; }

3.js代码

function $(id){ return document.getElementById(id); } $("inputId").onkeyup=function(){ $("psId").style.display="block"; //定义一个数组用于存放不同的正则表达式 var regArr=new Array(); regArr[0]=/[^a-zA-Z0-9_]/; regArr[1]=/[0-9]/; regArr[2]=/[a-z]/; regArr[3]=/[A-Z]/; var val=$("inputId").value; //获取用户输入的密码 var sec=0;//定义一个变量用于存放密码强度 if(val.length>=6){ for(var i=0;i<regArr.length;i++){ //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合则强度+1 if(val.match(regArr[i])){ sec ++; } } $("psId").style.display="none"; $("passwordStrong").style.display="block"; } if(sec==0){ $("PSTip").innerHTML=""; $("PSShow").className=""; }else if(sec==1){ $("PSTip").innerHTML="强度：弱"; $("PSTip").style.color="red"; $("PSShow").className="weakId"; }else if(sec==2){ $("PSTip").innerHTML="强度：中"; $("PSTip").style.color="orange"; $("PSShow").className="middleId"; }else if(sec==3){ $("PSTip").innerHTML="强度：强"; $("PSTip").style.color="blue"; $("PSShow").className="strongId"; }else if(sec==4){ $("PSTip").innerHTML="强度：超强"; $("PSTip").style.color="green"; $("PSShow").className="overStrongId"; } }

4.效果图如下所示： $好啦，简单的密码强度设置就完了！$ ✌️ ✌️ ✌️ ✌️ ✌️ ✌️