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

 更新时间:2017年03月08日 14:56:57   作者:yanfangphp  
这篇文章主要介绍了基于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实现根据密码长度 显示安全条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • JavaScript对Cookie进行读写操作实例

    JavaScript对Cookie进行读写操作实例

    这篇文章主要介绍了JavaScript对Cookie进行读写操作的方法,实例分析了javascript针对cookie的读写操作技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • javascript实现数据双向绑定的三种方式小结

    javascript实现数据双向绑定的三种方式小结

    本篇文章主要介绍了javascript实现数据双向绑定的三种方式小结,前端的视图层和数据层有时需要实现双向绑定,目前实现数据双向绑定主要有三种,有兴趣的可以了解一下。
    2017-03-03
  • 浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)

    浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式)

    下面小编就为大家分享一篇浅谈SpringMVC中post checkbox 多选框value的值(隐藏域方式),具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • JS打断点的六种常用姿势你用过几种

    JS打断点的六种常用姿势你用过几种

    JS断点调试,即是在浏览器开发者工具中为JS代码添加断点,让JS执行到某一特定位置停住,方便开发者对该处代码段的分析,这篇文章主要介绍了JS打断点的六种常用姿势的相关资料,需要的朋友可以参考下
    2025-04-04
  • javascript头像上传代码实例

    javascript头像上传代码实例

    这篇文章主要介绍了javascript头像上传代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • js如何将元素滚动到可见区域

    js如何将元素滚动到可见区域

    文章介绍了如何使用scrollIntoViewIfNeeded方法将元素滚动到可见区域,以及如何通过配置对象控制滚动行为,还提供了一个纯JavaScript的解决方案,可以实现类似的功能
    2024-12-12
  • 如何在CocosCreator中使用http和WebSocket

    如何在CocosCreator中使用http和WebSocket

    这篇文章主要介绍了在Cocos Creator中使用的Http和WebSocket,对websocket感兴趣的同学,一定要看下
    2021-04-04
  • 基于JS实现父组件的请求服务过程解析

    基于JS实现父组件的请求服务过程解析

    这篇文章主要介绍了基于JS实现父组件的请求服务过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • Javascript 作用域使用说明

    Javascript 作用域使用说明

    在传统的面向对象程序设计中,主要关注于公用和私有作用域。公用作用域中的对象属性可以从对象外部访问,即开发者创建对象的实例后,就可使用它的公用属性。
    2009-08-08
  • ES2020 新特性(种草)

    ES2020 新特性(种草)

    这篇文章主要介绍了ES2020 新特性(种草),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01

最新评论