js判断密码强度

html代码:

复制代码
 1 <form name="form1" action="">
 2     密码:<input type="password" size="8" onkeyup="pwStrength(this.value)" onblur="pwStrength(this.value)">
 3     <br>
 4     密码强度:
 5     <table width="220px" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22px">
 6         <tr align="center" bgcolor="#f5f5f5">
 7             <td width="33%" id="strength_L"></td>
 8             <td width="33%" id="strength_M"></td>
 9             <td width="33%" id="strength_H"></td>
10         </tr>
11     </table>
12 </form>
复制代码

js代码:

复制代码
 1 function pwdStrength(pwd) {
 2     O_color = "#eeeeee";
 3     L_color = "#FF0000";
 4     M_color = "#FF9900";
 5     H_color = "#33CC00";
 6     var level = 0, strength = "O";
 7     if (pwd == null || pwd == '') {
 8         strength = "O";
 9         Lcolor = Mcolor = Hcolor = O_color;
10     }
11     else {
12         var mode = 0;
13         if (pwd.length <= 4)
14             mode = 0;
15         else {
16             for (i = 0; i < pwd.length; i++) {
17                 var charMode, charCode;
18                 charCode = pwd.charCodeAt(i);
19                 // 判断输入密码的类型
20                 if (charCode >= 48 && charCode <= 57) //数字  
21                     charMode = 1;
22                 else if (charCode >= 65 && charCode <= 90) //大写  
23                     charMode = 2;
24                 else if (charCode >= 97 && charCode <= 122) //小写  
25                     charMode = 4;
26                 else
27                     charMode = 8;
28                 mode |= charMode;
29             }
30             // 计算密码模式
31             level = 0;
32             for (i = 0; i < 4; i++) {
33                 if (mode & 1)
34                     level++;
35                 mode >>>= 1;
36             }
37         }
38         switch (level) {
39             case 0:
40                 strength = "O";
41                 Lcolor = Mcolor = Hcolor = O_color;
42                 break;
43             case 1:
44                 strength = "L";
45                 Lcolor = L_color;
46                 Mcolor = Hcolor = O_color;
47                 break;
48             case 2:
49                 strength = "M";
50                 Lcolor = Mcolor = M_color;
51                 Hcolor = O_color;
52                 break;
53             default:
54                 strength = "H";
55                 Lcolor = Mcolor = Hcolor = H_color;
56                 break;
57         }
58     }
59     document.getElementById("strength_L").style.background = Lcolor;
60     document.getElementById("strength_M").style.background = Mcolor;
61     document.getElementById("strength_H").style.background = Hcolor;
62     return strength;
63 }
复制代码

 

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
判断密码强度并通过颜色表示出不同的密码强度,可以结合上面的代码,在返回密码强度类型的基础上,加入颜色的判断逻辑。可以使用CSS样式来设置不同度类型的颜色。 以下是一段实现密码强度判断并通过颜色表示的JavaScript代码: ```javascript // 定义密码强度类型 const PasswordStrength = { WEAK: 'weak', MEDIUM: 'medium', STRONG: 'strong' }; function checkPasswordStrength(password) { // 密码长度小于6位,认为是弱密码 if (password.length < 6) { return { strength: PasswordStrength.WEAK, color: 'red' }; } // 密码长度大于等于6位,包含数字、小写字母、大写字母和特殊字符,认为是密码 if (/\d/.test(password) && /[a-z]/.test(password) && /[A-Z]/.test(password) && /[\W_]/.test(password)) { return { strength: PasswordStrength.STRONG, color: 'green' }; } // 其他情况,认为是中等密码 return { strength: PasswordStrength.MEDIUM, color: 'orange' }; } // 获取页面元素 const passwordInput = document.getElementById('password'); const strengthIndicator = document.getElementById('strength-indicator'); // 监听密码输入框的变化 passwordInput.addEventListener('input', function() { const password = passwordInput.value; const strength = checkPasswordStrength(password); // 设置密码强度指示器的颜色 strengthIndicator.style.backgroundColor = strength.color; // 设置密码强度指示器的文本 switch (strength.strength) { case PasswordStrength.WEAK: strengthIndicator.innerText = '弱'; break; case PasswordStrength.MEDIUM: strengthIndicator.innerText = '中'; break; case PasswordStrength.STRONG: strengthIndicator.innerText = ''; break; } }); ``` 在上面的代码中,我们定义了一个checkPasswordStrength函数,该函数接收一个密码字符串作为参数,根据一定的规则来判断密码度,并返回对应的度类型和颜色。在函数中使用了正则表达式来判断密码是否符合规则,最后根据判断结果返回对应的密码强度类型和颜色。 在页面中,我们使用了一个密码输入框和一个密码强度指示器,监听密码输入框的变化,在每次输入后判断密码强度并将度类型和颜色显示在指示器上。通过设置指示器的背景色和文本来表示不同的密码强度
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值