欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-02-09 21:43:34
大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能,此功能基于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实现根据密码长度 显示安全条功能,希望对大家有所帮助