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的反射问题
Apr 07 Javascript
浏览器加载、渲染和解析过程黑箱简析
Nov 29 Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
Dec 07 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
vue-cli+axios实现文件上传下载功能(下载接收后台返回文件流)
May 10 Javascript
jquery实现的分页显示功能示例
Aug 23 jQuery
node.js处理前端提交的GET请求
Aug 30 Javascript
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Vue中常用rules校验规则(实例代码)
Nov 14 Javascript
小程序跳转H5页面的方法步骤
Mar 06 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中foreach循环中使用引用要注意的地方
2011/01/02 PHP
destoon切换城市后实现logo旁边显示地区名称的方法
2014/08/21 PHP
WordPress中is_singular()函数简介
2015/02/05 PHP
ThinkPHP中html:list标签用法分析
2016/01/09 PHP
PHP Post获取不到非表单数据的问题解决办法
2018/02/27 PHP
PHP asXML()函数讲解
2019/02/03 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
js no-repeat写法 背景不重复
2009/03/18 Javascript
javascript继承的六大模式小结
2015/04/13 Javascript
jQuery插件bgStretcher.js实现全屏背景特效
2015/06/05 Javascript
JavaScript学习笔记整理_setTimeout的应用
2016/09/19 Javascript
NodeJS学习笔记之Module的简介
2017/03/24 NodeJs
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
解析Json字符串的三种方法日常常用
2018/05/02 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
js+html5 canvas实现ps钢笔抠图
2019/04/28 Javascript
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
2019/06/18 jQuery
bootstrap datepicker的基本使用教程
2019/07/09 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
js判断一个对象是数组(函数)的方法实例
2019/12/19 Javascript
[40:10]2015国际邀请赛全明星表演赛
2015/08/07 DOTA
Ubuntu下创建虚拟独立的Python环境全过程
2017/02/10 Python
Python编程argparse入门浅析
2018/02/07 Python
使用numba对Python运算加速的方法
2018/10/15 Python
python调用其他文件函数或类的示例
2019/07/16 Python
Python安装OpenCV的示例代码
2020/03/05 Python
Python爬虫爬取微信朋友圈
2020/08/06 Python
PHP面试题集
2016/12/18 面试题
生日主持词
2014/03/20 职场文书
2014副局长群众路线对照检查材料思想汇报
2014/09/22 职场文书
技术员个人工作总结
2015/03/03 职场文书
护士实习自荐信
2015/03/06 职场文书
导游词之云南丽江古城
2019/09/17 职场文书
创业计划书之零食店(进口)
2019/09/24 职场文书
浅谈如何提高PHP代码的质量
2021/05/28 PHP
【海涛教你打DOTA】黑鸟第一视角解说
2022/04/01 DOTA