Js detects user input password strength _ javascript skills

This article mainly introduces how js detects the strength of passwords entered by users and checks the strength of passwords entered by users in four aspects, if you are interested, you can refer to a code that uses Javascript to check the user's input password strength. The following code mainly covers Detection in four aspectsIf you are interested in the strength of the password you entered, you can add or modify it to your desired form!
1. If the entered password Less than 5 digitsThen it is determined to be weak.
2. If the entered password It can only contain numbers, lower-case letters, upper-case letters, or other special characters. One of themIs determined to be weak.
3. If the password is Digits, lowercase letters, uppercase letters, or other special characters..
4. If the password is Three or more digits, lowercase letters, uppercase letters, or other special symbolsIs determined to be strong.
Let's take a look at the effect of this implementation!

The following is the code for detecting the user's input password strength using Javascript.
Some html code:

 
 
 
  
  
  
 
   
 
    
 
 
    
None
 
    
 
 
   
 
  
 
 
 

Part of the css 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;} 

Js functions used:

Function CheckIntensity (pwd) {var Mcolor, Wcolor, Scolor, Color_Html; var m = 0; var Modes = 0; for (I = 0; I
 
  
= 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 = "weak"; break; case 2: Wcolor = "pwd pwd_Medium_c"; Mcolor = "pwd pwd_Medium_c "; scolor = "pwd pwd_c pwd_c_r"; Color_Html = "medium"; break; case 3: Wcolor = "pwd pwd_Strong_c"; Mcolor = "pwd pwd_Strong_c "; scolor = "pwd pwd_Strong_c pwd_Strong_c_r"; Color_Html = "strong"; break; default: Wcolor = "pwd pwd_c"; Mcolor = "pwd pwd_c pwd_f "; scolor = "pwd pwd_c pwd_c_r"; Color_Html = "NONE"; 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 ;}
 

The intensity of password settings is especially important to user information security. Therefore, you must pay attention to it. Not only do you always pay attention to password settings during development projects, but you also need to increase the password strength during normal registration, to protect personal information security, I hope this article will be helpful for your learning.