利用JavaScript来实现用动态检验密码强度

Posted 2020-08-16 sunshine

平时我们会在某些网站的注册页面或者更改密码的页面发现当我们输入密码时，会有一个类似于进度条的长条进行提示用户输入的密码强度。如下图：

我看到有些人用几张不同的图片来替换，这样似乎可以，但是不太好。所以我通过其他方式实现。

实质上这是根据用户输入的不同密码强度来改变 颜色区域的长度。

密码强度这个横条实质是一个div，其他标记也可以，div里面有一个span标记，我就是通过改变span的长度和颜色来表现密码的强度的。原理很简单，但是在操作过程中，可能会遇到一些问题很头疼。

1.先在html页面里面定义一个输入框用于输入密码，一个一个div，在div里面放一个span标签并且设置相应的属性，type，name，value，class，id等

1 <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 密码强度：<div class="pwdStrongth"><span class="cinnerprogress" id="innerprogress"></span></div><font id="strongthTip"></font>

2.给标签设置相应的css，来控制标签的样式，使其感觉漂亮一点：

 1 <style type="text/css">
 2     /*用于修饰密码强度条外边框div*/
 3     .pwdStrongth{
 4         border:solid 1px #000000;
 5         border-radius:5px;
 6         height:15px;
 7         width:150px;}
 8     /*用于设置span标签的初始样式*/
 9     .cinnerprogress{ 
10         display: block;
11           height: 100%;
12          background-color:transparent;
13           border-radius: 5px;
14           width: 100%;
15         }
16     /*下面四个将用于设置span标签在不同密码强度的样式*/
17     .strengthLv1{  
18         display: block;
19           height: 100%;
20         border-radius: 5px;
21         background:red;width:25%;}
22     .strengthLv2{
23         display: block;
24           height: 100%;
25         border-radius: 5px;
26         background:orange;width:50%;}
27     .strengthLv3{
28         display: block;
29           height: 100%;
30         border-radius: 5px;
31         background:#09F;width:75%;}
32     .strengthLv4{
33         display: block;
34           height: 100%;
35         border-radius: 5px;
36         background:green;width:100%;}
37 </style>

3.写相应的javascript方法通过检测用户输入的密码强度来调用不同的样式来表现密码强度，密码强度的规则可以自己随意定义，只需在密码输入框的onblur（失去焦点）事件和onkeyup（按下键盘上来之后）事件调用下面的方法即可：

 1 function pwdComplex()//用于判断密码强度的
 2     {
 3         var pwdobj=document.getElementById("password"); //获取密码输入框对象
 4         var pwdTip=document.getElementById("pwdTip");//获取密码提示文字对象
 5         var pwdprogress=document.getElementById("innerprogress"); //获取span标签对象
 6         var strongthTip=document.getElementById("strongthTip");//获取密码强度提示文字的对象
 7         var regxs = new Array();//定义一个数组用于存放不同的正则表达式
 8         regxs[0]=/[^a-zA-Z0-9_]/g;
 9         regxs[1]=/[a-z]/g;
10         regxs[2]=/[0-9]/g;
11         regxs[3]=/[A-Z]/g;
12         var val = pwdobj.value;//获取用户输入的密码
13         var len = val.length;//获取用户输入的密码长度
14         var sec = 0;         //定义一个变量用于存放密码强度
15         if (len >= 6) //用于判断用户输入的密码强度
16         { // 至少六个字符
17             for (var i = 0; i < regxs.length; i++)  //遍历所有正则表达式，检测用户输入的密码符合哪些正则表达式，如果符合则强度+1
18             {
19                 if (val.match(regxs[i])) 
20                 {
21                     sec++;
22                 }
23             }
24         }
25         if(sec==0) //通过不同的密码强度调用不同的样式
26         {
27             strongthTip.innerText="";
28              //setAttribute("class", "className")中class是指改变class这个属性，所以要带引号，className是span标签的类名，也是对应的样式名
29             pwdprogress.setAttribute("class","cinnerprogress");
30         }
31         else if(sec==1)
32         {
33             strongthTip.innerText="强度：弱";
34             strongthTip.style.color="red";
35             pwdprogress.setAttribute("class","strengthLv1");
36                 
37         }
38         else if(sec==2)
39         {
40             strongthTip.innerText="强度：中";    
41             strongthTip.style.color="orange";
42             pwdprogress.setAttribute("class","strengthLv2");
43             
44         }
45         else if(sec==3)
46         {
47             strongthTip.innerText="强度：强";    
48             strongthTip.style.color="#09F";
49             pwdprogress.setAttribute("class","strengthLv3");
50             
51         }
52         else if(sec==4)
53         {
54             strongthTip.innerText="强度：超强";    
55             strongthTip.style.color="green";
56             pwdprogress.setAttribute("class","strengthLv4");
57             
58         }
59     }

以上是完整的代码，供大家学习和参考，若有错误或不足，请大家多多指教！！！