Implementation method of dynamically checking password strength in JavaScript

Usually we will find that when we enter the password on the registration page or password change page of some websites, there will be a long bar similar to a progress bar to prompt the user to enter the password strength. As shown below:

I saw some people replace it with several different pictures, which seems to work, but is not very good. So I do it in other ways.

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

The horizontal bar of password strength is essentially a div. Other tags can also be used. There is a span tag inside the div. I show the strength of the password by changing the length and color of the span. The principle is very simple, but during operation, you may encounter some troublesome problems.

1. First define an input box in the html page for entering the password, one div at a time, put a span tag inside the div and set the corresponding attributes, type, name, value, class, id, etc.

<font color="#FF0000">*</font>密码：<input type="text" name="password" id="password" value="请输入密码" onfocus=" passwordClear()" onblur="pwdComplex(),passwordValidate()" onkeyup="pwdComplex()" /></td><td><font id="pwdTip">不少于6位字符</font><br/>

2 Password strength:

<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2. Set the corresponding css for the label to control the style of the label and make it feel more beautiful:

<style type="text/css">
/*用于修饰密码强度条外边框div*/
.pwdStrongth{
border:solid 1px #000000;
border-radius:5px;
height:15px;
width:150px;}
/*用于设置span标签的初始样式*/
.cinnerprogress{
display: block;
height: 100%;
background-color:transparent;
border-radius: 5px;
width: 100%;
}
/*下面四个将用于设置span标签在不同密码强度的样式*/
.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 pass the detection The password strength entered by the user is used to call different styles to express the password strength. The rules of password strength can be defined at will. Just call the following in the onblur (lost focus) event and onkeyup (after pressing the keyboard) event of the password input box. The method is:

function pwdComplex()//用于判断密码强度的
{
var pwdobj=document.getElementById("password"); //获取密码输入框对象
var pwdTip=document.getElementById("pwdTip");//获取密码提示文字对象
var pwdprogress=document.getElementById("innerprogress"); //获取span标签对象
var strongthTip=document.getElementById("strongthTip");//获取密码强度提示文字的对象
var regxs = new Array();//定义一个数组用于存放不同的正则表达式
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;//获取用户输入的密码
var len = val.length;//获取用户输入的密码长度
var sec = 0; //定义一个变量用于存放密码强度
if (len >= 6) //用于判断用户输入的密码强度
{ // 至少六个字符
for (var i = 0; i < regxs.length; i++) //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合则强度+1
{
if (val.match(regxs[i]))
{
sec++;
}
}
}
if(sec==0) //通过不同的密码强度调用不同的样式
{
strongthTip.innerText="";
//setAttribute("class", "className")中class是指改变class这个属性，所以要带引号，className是span标签的类名，也是对应的样式名
pwdprogress.setAttribute("class","cinnerprogress");
}
else if(sec==1)
{
strongthTip.innerText="强度：弱";
strongthTip.style.color="red";
pwdprogress.setAttribute("class","strengthLv1");
}
else if(sec==2)
{
strongthTip.innerText="强度：中";
strongthTip.style.color="orange";
pwdprogress.setAttribute("class","strengthLv2");
}
else if(sec==3)
{
strongthTip.innerText="强度：强";
strongthTip.style.color="#09F";
pwdprogress.setAttribute("class","strengthLv3");
}
else if(sec==4)
{
strongthTip.innerText="强度：超强";
strongthTip.style.color="green";
pwdprogress.setAttribute("class","strengthLv4");
}
}