我们帮大家精选了JS安全提示相关的编程文章，网友崔涵映根据主题投稿了本篇教程内容，涉及到JS、密码输入、提示安全、JS实现根据密码长度显示安全条功能相关内容，已被546网友关注，如果对知识点想更进一步了解可以在下方电子资料中获取。
JS实现根据密码长度显示安全条功能
大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能，此功能基于js如何实现的呢？下面看下实现代码，具体代码如下所示：
//根据密码长度显示安全条
<ul class="clear">
<li>密 码：</li>
<li> <input type="password" id="pwd" name="pwd" class="in" onKeyUp=pwStrength(this.value) onBlur=pw_y("pwd","pwd1")></li>
<li><em class="red">*</em></li>
<li class="i2 grey"><table border="0" bordercolor="#cccccc" style='display:marker'>
<tr align="center">
<td id="strength_L" bgcolor="#eeeeee">弱</td>
<td id="strength_M" bgcolor="#eeeeee">中</td>
<td id="strength_H" bgcolor="#eeeeee">强</td>
<td align="left" >
<label id="pwd1">使用数字，字母，下划线，长度在 6 - 20 个字符之间</label></td>
</tr>
</table>
</li>
</ul>
function pwStrength(pwd){
O_color="#eeeeee";
L_color="#FF0000";
M_color="#FF9900";
H_color="#33CC00";
if (pwd==null||pwd==''){
Lcolor=Mcolor=Hcolor=O_color;
}else{
S_level=checkStrong(pwd);
switch(S_level) {
case 0:
Lcolor=Mcolor=Hcolor=O_color;
case 1:
Lcolor=L_color;
Mcolor=Hcolor=O_color;
break;
case 2:
Lcolor=Mcolor=M_color;
Hcolor=O_color;
break;
default:
Lcolor=Mcolor=Hcolor=H_color;
}
}
document.getElementById("strength_L").style.background=Lcolor;
document.getElementById("strength_M").style.background=Mcolor;
document.getElementById("strength_H").style.background=Hcolor;
return;
}
以上所述是小编给大家介绍的JS实现根据密码长度 显示安全条功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持！
