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


Posted in Javascript onMarch 08, 2017

大家在一些网站上经常可以看到数码密码会根据输入的密码长度显示安全条功能,此功能基于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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
玩转jQuery按钮 请告诉我你最喜欢哪些?
Jan 08 Javascript
JS图片预加载 JS实现图片预加载应用
Dec 03 Javascript
jquery异步跨域访问代码
Jun 28 Javascript
js的.innerHTML = &quot;&quot;IE9下显示有错误的解决方法
Sep 16 Javascript
node.js中的events.emitter.removeListener方法使用说明
Dec 10 Javascript
学习JavaScript设计模式(代理模式)
Dec 03 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
详解Javascript中的原型OOP
Oct 12 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
Oct 14 jQuery
js实现复制功能(多种方法集合)
Jan 06 Javascript
小程序实现上传视频功能
Aug 18 Javascript
jquery实现自定义图片裁剪功能【推荐】
Mar 08 #Javascript
bootstrap实现动态进度条效果
Mar 08 #Javascript
jquery实现超简单的瀑布流布局【推荐】
Mar 08 #Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 #Javascript
jquery仿苹果的时间/日期选择效果
Mar 08 #Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
Mar 08 #Javascript
js/jq仿window文件夹移动/剪切/复制等操作代码
Mar 08 #Javascript
You might like
基于php验证码函数的使用示例
2013/05/03 PHP
php 模拟POST提交的2种方法详解
2013/06/17 PHP
PHP获取网页标题的3种实现方法代码实例
2014/04/11 PHP
windwos下使用php连接oracle数据库的过程分享
2014/05/26 PHP
PHP实现二维数组按照指定的字段进行排序算法示例
2019/04/23 PHP
JavaScript方法和技巧大全
2006/12/27 Javascript
使用js画图之画切线
2015/01/12 Javascript
jQuery实现下拉加载功能实例代码
2016/04/01 Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
2017/01/08 Javascript
JS html时钟制作代码分享
2017/03/03 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
解决vue多个路由共用一个页面的问题
2018/03/12 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python二维码生成库qrcode安装和使用示例
2014/12/16 Python
用Python生成器实现微线程编程的教程
2015/04/13 Python
在Python中使用swapCase()方法转换大小写的教程
2015/05/20 Python
Python的几个高级语法概念浅析(lambda表达式闭包装饰器)
2016/05/28 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
python编辑用户登入界面的实现代码
2018/07/16 Python
Python实现简单的用户交互方法详解
2018/09/25 Python
在双python下设置python3为默认的方法
2018/10/31 Python
python学习开发mock接口
2019/04/28 Python
python numpy中cumsum的用法详解
2019/10/17 Python
如何使用Python破解ZIP或RAR压缩文件密码
2020/01/09 Python
jupyter notebook 参数传递给shell命令行实例
2020/04/10 Python
keras小技巧——获取某一个网络层的输出方式
2020/05/23 Python
pytorch中 gpu与gpu、gpu与cpu 在load时相互转化操作
2020/05/25 Python
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
ProBikeKit英国:在线公路自行车之家
2017/02/10 全球购物
在C中是否有模拟继承等面向对象程序设计特性的好方法
2012/05/22 面试题
写出二分查找算法的两种实现
2013/05/13 面试题
银行会计财务工作个人的自我评价
2013/10/29 职场文书
机械工程师的岗位职责
2013/11/17 职场文书
对外汉语专业大学生职业生涯规划范文
2014/09/13 职场文书
2015年小学一年级班主任工作总结
2015/05/21 职场文书