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 相关文章推荐
JS BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
jQuery Ajax 实例全解析
Apr 20 Javascript
jQuery中live方法的重复绑定说明
Oct 21 Javascript
jQuery图片切换插件jquery.cycle.js使用示例
Jun 16 Javascript
jquery datatable后台封装数据示例代码
Aug 07 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
jQuery实现产品对比功能附源码下载
Aug 09 Javascript
jQuery插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
Angular中使用MathJax遇到的一些问题
Dec 15 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Electron-vue开发的客户端支付收款工具的实现
May 24 Javascript
vue动态渲染svg、添加点击事件的实现
Mar 13 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
《被神捡到的男人》动画化计划进行中!
2020/03/06 日漫
PHP开发文件系统实例讲解
2006/10/09 PHP
PHP封装函数实现生成随机的字符串验证码
2017/01/24 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
php使用curl实现ftp文件下载功能
2017/05/16 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
重载toString实现JS HashMap分析
2011/03/13 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
JQuery中使用on方法绑定hover事件实例
2014/12/09 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
JS中作用域和变量提升(hoisting)的深入理解
2016/10/31 Javascript
JS 终止执行的实现方法
2016/11/24 Javascript
js选项卡的制作方法
2017/01/23 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue中实现左右联动的效果
2018/06/22 Javascript
对vue v-if v-else-if v-else 的简单使用详解
2018/09/29 Javascript
js实现弹出框的拖拽效果实例代码详解
2019/04/16 Javascript
Vue+elementui 实现复杂表头和动态增加列的二维表格功能
2019/09/23 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
Python中AND、OR的一个使用小技巧
2015/02/18 Python
详解在Python的Django框架中创建模板库的方法
2015/07/20 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
python bottle框架支持jquery ajax的RESTful风格的PUT和DELETE方法
2017/05/24 Python
python与caffe改变通道顺序的方法
2018/08/04 Python
python连接mongodb密码认证实例
2018/10/16 Python
基于Python的微信机器人开发 微信登录和获取好友列表实现解析
2019/08/21 Python
python实现人机猜拳小游戏
2020/02/03 Python
天猫超市:阿里巴巴打造的网上超市
2016/11/02 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
Travelstart沙特阿拉伯:廉价航班、豪华酒店和实惠的汽车租赁优惠
2019/04/06 全球购物
保安部任务及岗位职责
2014/02/25 职场文书
2014学习十八届四中全会精神思想汇报范文
2014/10/23 职场文书
违纪检讨书范文
2015/01/27 职场文书
公路施工安全责任书
2015/05/08 职场文书
pytorch锁死在dataloader(训练时卡死)
2021/05/28 Python