当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS实现根据密码长度显示安全条功能

JS实现根据密码长度显示安全条功能

2019年03月22日  | 移动技术网IT编程  | 我要评论

大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能，此功能基于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实现根据密码长度 显示安全条功能，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网