A method of implementing JavaScript dynamic test password strength _javascript skills

Usually we will be in some Web site registration page or change the Password page found that when we enter the password, there will be a bar similar to the progress bars to prompt the user to enter the password strength. The following figure:

I see some people with different pictures to replace, it seems to be, but not very good. So I realized it in other ways.

Essentially, this changes the length of the color area based on the different password intensities entered by the user.

Password strength This bar is essentially a div, other tags can be, div inside a span tag, I just change the length of span and color to show the strength of the password. The principle is very simple, but in the course of operation, may encounter some problems are very headache.

1. First in the HTML page to define an input box to enter the password, a Div, put a span tag inside the DIV and set the corresponding properties, Type,name,value,class,id, etc.

<font color= "#FF0000" >*</font> Password: <input type= "text" name= "password" id= "password" value= "Please enter password" Onfocus= "Passwordclear ()" onblur= "Pwdcomplex (), Passwordvalidate ()" onkeyup= "Pwdcomplex ()"/></td><td ><font id= "Pwdtip" > not less than 6-bit characters </font><br/>

2 Password Strength:

<div class= "Pwdstrongth" ><span class= "cinnerprogress" id= "innerprogress" ></span></div> <font id= "Strongthtip" ></font>

2. Set the corresponding CSS to the label to control the style of the label to make it feel beautiful a little:

<style type= "Text/css" >
/* is used to decorate the outer border of the password intensity bar div*/
. pwdstrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/* The initial style used to set the span label
. cinnerprogress{ 
Display:block;
height:100%;
background-color:transparent;
border-radius:5px;
width:100%;
}
/* The following four styles will be used to set the span label at different password strength * *
strengthlv1{ 
display:block;
height:100%;
border-radius:5px;
background:red;width:25%}
. strengthlv2{
Display:block;
height:100%;
border-radius:5px;
background:orange;width:50%}
. strengthlv3{
Display:block;
height:100%;
border-radius:5px;
Background: #09F; width:75%;}
. strengthlv4{
Display:block;
height:100%;
border-radius:5px;
background:green;width:100%;}
</style>

3. Write the corresponding JavaScript method to invoke different styles to represent the password strength by detecting the password strength entered by the user, and the rules of the password strength can be defined by themselves. The following method can be invoked simply by onblur (lost focus) event in the Password input box and onkeyup (after pressing the keyboard):

function Pwdcomplex ()//To determine the password strength of the {var Pwdobj=document.getelementbyid ("password");//Get Password Input box object var pwdtip= document.getElementById ("Pwdtip");//Get password hint text object var Pwdprogress=document.getelementbyid ("Innerprogress"); Gets the span label object var strongthtip=document.getelementbyid ("Strongthtip");//Gets the password intensity hint text object var regxs = new Array ();//
Defines an array for storing different regular expression regxs[0]=/[^a-za-z0-9_]/g;
regxs[1]=/[a-z]/g;
regxs[2]=/[0-9]/g;
regxs[3]=/[a-z]/g; var val = pwdobj.value;//Gets the password entered by the user var len = val.length;//Gets the password length entered by the user var sec = 0; Define a variable to store password strength if (len >= 6)//To determine the password strength {//At least six characters entered by the user for (var i = 0; i < regxs.length; i++)//traverse all regular expressions to detect user input
The password matches which regular expressions, if the strength +1 {if (Val.match (Regxs[i])) {sec++}}} if (sec==0)//calls a different style with different password intensities {strongthtip.innertext= ""; Class in//setattribute ("Class", "ClassName") means to change the attribute of class.
So to be quoted, ClassName is the class name of span label, also corresponding style name Pwdprogress.setattribute ("Class", "cinnerprogress"); else if (sec==1) {strongthtip.innertext= "Strength: Weak"; strongthtip.style.color= "Red"; pwdprogress.setattribUte ("Class", "strengthLv1"); 
else if (sec==2) {strongthtip.innertext= "Strength: Medium";
Strongthtip.style.color= "Orange";
Pwdprogress.setattribute ("Class", "StrengthLv2"); 
else if (sec==3) {strongthtip.innertext= strength: strong;
Strongthtip.style.color= "#09F";
Pwdprogress.setattribute ("Class", "StrengthLv3"); 
else if (sec==4) {strongthtip.innertext= "Strength: Super strong";
Strongthtip.style.color= "Green";
Pwdprogress.setattribute ("Class", "strengthLv4"); }
}

The above is a small set to introduce the JavaScript dynamic test password strength of the implementation method to achieve a simulation of the background data login effect, I hope to help everyone, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!