js detects the strength of the password entered by the user

js detects the strength of the password entered by the user_javascript skills

WBOY

Release： 2016-05-16 15:35:34

Original

924 people have browsed it

A code that uses Javascript to detect the strength of the password entered by the user. The following code mainly detects the strength of the password entered by the user from the following four aspects. Interested friends can add or modify it to their own. Desired form!
1. If the entered password has less than 5 digits , it is considered weak.
2. If the entered password consists of only one of numbers, lowercase letters, uppercase letters or other special symbols , then Judged as weak.
3. If the password consists of two types of numbers, lowercase letters, uppercase letters or other special symbols , it will be judged as medium.
4. If the password consists of more than three numbers, lowercase letters, uppercase letters or other special symbols , it is determined to be strong.
Let’s take a look at the effect of this implementation first!

The following is the specific code that uses Javascript to detect the strength of the password entered by the user.
html part of the code:

<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>

Copy after login

css part code:

.pwd{width:40px;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;}

Copy after login

Js functions used:

function CheckIntensity(pwd){ 
 var Mcolor,Wcolor,Scolor,Color_Html; 
 var m=0; 
 var Modes=0; 
 for(i=0; i<pwd.length; i++){ 
  var charType=0; 
  var t=pwd.charCodeAt(i); 
  if(t>=48 && t <=57){charType=1;} 
  else if(t>=65 && t <=90){charType=2;} 
  else if(t>=97 && t <=122){charType=4;} 
  else{charType=4;} 
  Modes |= charType; 
 } 
 for(i=0;i<4;i++){ 
 if(Modes & 1){m++;} 
   Modes>>>=1; 
 } 
 if(pwd.length<=4){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; 
}

Copy after login

The strength of password settings is particularly important for user information security, so everyone must pay attention to it, not only during development projects, but also when registering information, you must also improve the strength of passwords to protect the security of personal information. I hope This article will be helpful to everyone's study.