Real-Time Detection of js password strength code, real-time js password strength

Real-Time Detection of js password strength code, real-time js password strength

The password strength judgment is a must when registering a Website user. different websites are implemented in different ways.
Password judgment is actually one of the forms for verification. Let's implement such a simple operation.

First, make a simple password input box and a progress bar that shows the password strength. The whole is covered by the vali_pass box. This box contains the title, password box, and the strength progress bar.

<Div class = "vali_pass"> 
In this way, we can use CSS to beautify it.

.vali_pass {  width: 350px;  margin: 0 auto;  padding: 10px;  border: #eee 1px solid;  text-align: center;}.vali_pass input {  width: 96%;  display: block;  margin: 0;  padding: 5px;  font-size: 14px;  line-height: 20px;}.vali_pass_progress {  margin-top: 10px;  background-color: #efefef;  height: 10px;  border-radius: 5px;}.vali_pass_inner_progress {  display: block;  height: 100%;  background-color: transparent;  border-radius: 5px;  width: 100%;}
At this time, we need to consider that there may be several states in this progress bar, which are the status when the front is low, the status when the front is low, and the status when the front is high.
OK. When we use it here, the width of the box inside the progress bar and the control of the background color are set to three styles.

.error { background-color: #ff3300;}.middle { background-color: gold;}.strong { background-color: green;}
In this way, CSS beautification will be completed in the HTML structure. Next we will perform JS listening.
First, add text input listening to the password input box.

ele_pass.onkeyup = function () {...}
To determine the password, you have to process it in this event. However, before processing, We have to initialize some data, such as the regular expression used to determine the password.

var regxs = [];regxs.push(/[^a-zA-Z0-9_]/g);regxs.push(/[a-zA-Z]/g);regxs.push(/[0-9]/g);
I used three regular expressions to determine the password matching degree in sequence. after data Initialization is complete, process the onkeyup event. first, obtain the value of the input box and its length. the length must be at least 6 characters. the sec is an added value of security. every time the regular expression is matched, the sec ++ indicates the security of the password. then it is converted into a value within 100 of the password. this value can be easily used to control the width of the internal progress bar.

Ele_pass.onkeyup = function () {var val = this. value; var len = val. length; var sec = 0; if (len> = 6) {// at least six characters for (var I = 0; I <regxs. length; I ++) {if (val. match (regxs [I]) {sec ++ ;}} var result = (sec/regxs. length) * 100; ele_progress.style.width = result + "% ";}
After the progress bar width is properly controlled, we cannot see the progress bar effect for the moment. Check the CSS code above. the Default background is transparent. then we have to control different security values and control their background colors. the following code controls the background color.

if(result > 0 && result <= 50){  ele_progress.setAttribute("class",begin_classname + " error");}else if (result > 50 && result < 100) {  ele_progress.setAttribute("class",begin_classname + " middle");} else if (result == 100) {  ele_progress.setAttribute("class",begin_classname + " strong");}
The final JS Code:

Var ele_pass = document. getElementsByTagName ("input") [0]; var ele_progress = document. getElementsByClassName ("vali_pass_inner_progress") [0]; var begin_classname = ele_progress.className; var regxs = []; regxs. pushes (/[^ a-zA-Z0-9 _]/g); regxs. push (/[a-zA-Z]/g); regxs. push (/[0-9]/g); ele_pass.onkeyup = function () {var val = this. value; var len = val. length; var sec = 0; if (len> = 6) {// at least six characters for (var I = 0; I <regxs. length; I ++) {if (val. match (regxs [I]) {sec ++ ;}} var result = (sec/regxs. length) * 100; ele_progress.style.width = result + "%"; if (result> 0 & result <= 50) {ele_progress.setAttribute ("class", begin_classname + "error ");} else if (result> 50 & result <100) {ele_progress.setAttribute ("class", begin_classname + "middle");} else if (result = 100) {ele_progress.setAttribute ("class", begin_classname + "strong ");}}
Then let's take a look at our results:

The above is all the content of this article, and I hope it will help you learn javascript programming.
Articles you may be interested in:

 

 
  
Verify the password strength of js on the client and be compatible with FireFox and IE
 
  
JS Code used to determine the password Strength During User Registration
 
  
JavaScript password strength judgment code
 
  
JS password Strength Verification (compatible with IE, Firefox, and Google)
 
  
Javascript password strength verification rules, scoring, and verification (front-end code is provided, and backend code can be translated according to the strength Rules)
 
  
Real-time verification code for Js password strength
 
  
JavaScript to determine the password strength (self-writing code)
 
  
Js Test password strength (low and medium)
 
  
Javascript password Strength Verification Code (two methods)
 
  
Js detects user input password strength