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 相关文章推荐
基于jQuery的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jquery.fileEveryWhere.js 一个跨浏览器的file显示插件
Oct 24 Javascript
根据表格中的某一列进行排序的javascript代码
Nov 29 Javascript
Javascript学习笔记之数组的构造函数
Nov 23 Javascript
js常用系统函数用法实例分析
Jan 12 Javascript
javascript完美实现给定日期返回上月日期的方法
Jun 15 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
jQuery实现的隔行变色功能【案例】
Feb 18 jQuery
Mpvue中使用Vant Weapp组件库的方法步骤
May 16 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
Dec 24 Javascript
ant design charts 获取后端接口数据展示
May 25 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
默默简单的写了一个模板引擎
2007/01/02 PHP
PHP register_shutdown_function函数的深入解析
2013/06/03 PHP
thinkphp实现多语言功能(语言包)
2014/03/04 PHP
php计算数组相同值出现次数的代码(array_count_values)
2015/01/20 PHP
PHP Curl模拟登录微信公众平台、新浪微博实例代码
2016/01/28 PHP
PHP简单实现遍历目录下特定文件的方法小结
2017/05/22 PHP
PHP vsprintf()函数格式化字符串操作原理解析
2020/07/14 PHP
使用Modello编写JavaScript类
2006/12/22 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
juqery 学习之五 文档处理 包裹、替换、删除、复制
2011/02/11 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
侧栏跟随滚动的简单实现代码
2013/03/18 Javascript
没有document.getElementByName方法
2013/08/19 Javascript
javascript创建数组之联合数组的使用方法示例
2013/12/26 Javascript
jquery动态改变form属性提交表单
2014/06/03 Javascript
c#程序员对TypeScript的认识过程
2015/06/19 Javascript
js实现不提交表单获取单选按钮值的方法
2015/08/21 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
JS控制静态页面传递参数并获取参数应用
2016/08/10 Javascript
javascript的几种写法总结
2016/09/30 Javascript
详解如何使用vue-cli脚手架搭建Vue.js项目
2017/05/19 Javascript
深入理解使用Vue实现Context-Menu的思考与总结
2019/03/09 Javascript
vue基于better-scroll仿京东分类列表
2020/06/30 Javascript
Python中__init__和__new__的区别详解
2014/07/09 Python
python3.5绘制随机漫步图
2018/08/27 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
使用APScheduler3.0.1 实现定时任务的方法
2019/07/22 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
canvas里面如何基于随机点绘制一个多边形的方法
2018/06/13 HTML / CSS
日本最大的旅游网站:Rakuten Travel(乐天旅游)
2018/08/02 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
党员入党表决心的话
2014/03/11 职场文书
新闻人物通讯稿
2014/10/09 职场文书
学生自我评语
2015/01/04 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书