JS根据密码输入长度提示安全条的实例方法

  • 更新时间:2019-11-25 09:58:29
  • 编辑:姚高原
给大家整理了JS安全提示相关的编程文章,网友邱昊苍根据主题投稿了本篇教程内容,涉及到JS、密码输入、提示安全、JS实现根据密码长度显示安全条功能相关内容,已被633网友关注,相关难点技巧可以阅读下方的电子资料。

参考资料

正文内容

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实现根据密码长度 显示安全条功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对码农之家网站的支持!

JS安全提示相关教程

  • Javaweb视频下载之JSP四大作用

    程序员在写代码的时候,难免会遇到作用域的问题,今天我们要谈的也是JSP的四大作用域。本文主要总结了JSP四大作用域page、request、session和application和它们的请求范围。

    发布时间:2021-06-06

  • 深入研究jQuery图片懒加载 lazyload.js使用方法

    这篇文章主要介绍了jQuery图片懒加载 lazyload.js使用方法,通过设置临界点,占位符,设置事件来触发加载等等来讲解lazyload.js的使用,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以

    发布时间:2019-07-24

  • JavaScript忍者秘籍

    JavaScript忍者秘籍

    这是由jQuery库创始人编写的一本深入剖析JavaScript语言的书,从不同层次讲述了逐步成为JavaScript高手所需的知识,适合具备一定JavaScript基础知识的读者阅读

    大小:38.6 MBJavaScript电子书

  • JavaScript框架设计

    JavaScript框架设计

    JavaScript,框架设计

    大小:286.4 MBjs框架电子书

  • JavaScript ES6函数式编程入门经典

    JavaScript ES6函数式编程入门经典

    本书使用JavaScript ES6带你学习函数式编程。你将学习柯里化、偏函数、高阶函数以及Monad等概念。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    大小:46.3 MBJavaScript电子书

  • HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通

    HTML CSS JavaScript网页制作从入门到精通 第3版 共分为19章和4个附录,重点介绍使用HTML进行网页制作的方方面面,同时讲解了目前流行的Web标准与CSS网页布局实例,以及基于JavaScript语言的网页特

    大小:65.2 MB网页制作电子书

  • JavaScript之美

    JavaScript之美

    阅读文章这书好像是坐着来与一些JavaScript大师共进午餐,听她们探讨她们现场不断涌现出去的新念头。JavaScript能够说成全世界*异议和别人误会*多的程序语言。许多人企图用别的语言替代它的

    大小:94 MBJavaScript电子书

  • 第三方JavaScript编程

    第三方JavaScript编程

    第三方JavaScript应用程序是自包含的应用组件,通常都是小脚本或插件,能够为Web站点增加功能。它们往往是由独立的组织或个人提供的,代码和文件都是来自于远程的Web地址。 《第三方JavaS

    大小:74.2 MBJavaScript电子书

  • JavaScript核心技术开发解密

    JavaScript核心技术开发解密

    这本书针对JavaScript 中的核心技术,结合前沿开发实践,全面的讲解与分析JavaScript 的内存、函数、执行上下文、面向对象、模块等重点知识

    大小:68.4 MBJavaScript电子书

  • 精通JavaScript

    精通JavaScript

    精通JavaScript(第2版) 是iQuery之父的经典之作,是深入学习JavaScript技术的绝佳教材,涵盖了可重用代码、文档对象模型、Ajax、Web生产工具、AngularJS等内容。作者讲解了JavaScript的发展现状、实用技

    大小:33.5 MBJavaScript电子书

用户留言