When filling out the form, especially when entering the password, we often see the effect of displaying the password strength in real time. So how can this effect be achieved through our native js?
Ideas:
1. Passwords are usually composed of numbers, capital letters, lowercase letters and special characters.
2. All passwords are pure numbers or pure capital letters, or pure lower case letters. We believe that the password strength is low
3. Passwords are mixed with two types. We believe that the password strength is medium.
4. Passwords are mixed with three or four types. We believe that such password combinations are very strong.
5. By judging the input password, return 1 if it is a number; if it is a capital letter, return 2 if it is a lowercase letter, return 4 if it is a special character, return 8 if it is a special character (please see Article 6 if you choose to return these numbers);
6. Initialize a variable that reflects the strength of the password to 0, which is represented in binary, that is, 0000, and perform binary phase or operation with our return value.
7. For example, the initial value is 0000
It is an operation with the return value of 1 (0001) of the number, which is equal to 0001;
The password composed of a lowercase letter and a capital letter may be 0110;
The password consisting of capital letters, lowercase letters, and numbers may be 0111;
The password of capital letters, lowercase letters, numbers, and special characters may be 1111;
8. Assign phase or result to this initial value. By judging how many 1s this value has in binary, you can judge the corresponding password strength (use 0001 to calculate phase and this value together, and at the same time, perform unsigned right-shift operation to obtain the number of 1)
The above is our idea, so we can start writing our code
① Create a function to determine what each character in the input value consists of
function charMode(char){
switch (true) {
case (char>=48&&char<=57):
return 1;
break;
case (char>=65&&char<=90):
return 2;
break;
case (char>=97&&char<=122):
return 4;
break;
default:
return 8;
break;
}
}
You can also use if else to make judgments here, but it doesn’t seem as pleasant as switch. At the same time, please note that the input value is not the input value in the switch() brackets, but a true; because the return of the case is a Boolean value, which determines whether the Boolean values are equal (the switch does a convergent comparison and does not perform type conversion)
② Create a function to determine the password strength type of the entire input string
function checkPsw(password){
strengh=0;//Define a global variable to detect password strength for(var i=0;i<;i++){ strengh|=charMode((i));
}
}
Here |= means to do phase or operation and assign values
③Create a function to calculate the password strength
function charStrengh(strengh){
var reference=0;
for(var i=0;i<4;i++){
if(strengh&1){
reference++;
}
strengh>>>=1;//Unsigned right shift one to continue matching }
return reference;
}
Here &1 means to do and operate with 1 (0001), >>>= means to do unsigned right shift, such as 0101 unsigned right shift is 0010; do unsigned right shift again and it is 0001;
Finally, we can know the password strength by judging the reference number.
Refer to the blog log in the previous section to verify the input content in real time. By setting the style, you can achieve real-time verification of password strength.
Summarize:
Here we determine whether it is a number, capital letter or lowercase letter by judging the key code. In fact, we can also use powerful regular expressions to achieve it;
Common key codes:
Numbers 48-57
Capital letters 65-90
Lowercase letters 97-122
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.