• 【美丽中国长江行】常德桃源:做好水文章,答对生态卷 2018-05-26
  • 农业农村部“百乡万户”驻村调研:兴农业 补短板 2018-05-26
  • 女人更年期后,要不要避孕?如何避? 2018-05-25
  • 债市风险有多大?华商系债基今年跌幅已超20% 2018-05-25
  • 供电公司采取小额诉讼手段维权 3个月不交电费将收到律师函 2018-05-25
  • 智能公交让全民体验智慧出行 2018-05-25
  • 杭州男子钓起16斤重“猛兽”,专家一看:可别随意丢弃! 2018-05-25
  • 望川十年,看见中国社会的成长 2018-05-25
  • 哈尔滨市“拔钉子”严查露天烧烤 21家冒烟摊位将被依法处罚 2018-05-24
  • 新濠天地娱乐城官网 2018-05-24
  • “澳门368足球博彩公司”足球比分及时直播李国英主持召开省深化医药卫生体制改革领导小组会议 2018-05-23
  • 马来大选92岁前总理改写政治版图 60年来政党首轮替 2018-05-23
  • 科技创新技能挑战赛聚焦冬奥主题 2018-05-23
  • 泰国试管婴儿bnh医院技术怎么样,是最好的吗?—海口论坛 2018-05-23
  • 置业指南:买高层要注意这些问题 2018-05-22
  • Javascript检测用户输入密码强度的效果代码

    栏目: 编程语言 发布于: 2014-05-06 17:06:34

    一个用Javascript检测用户输入密码强度的效果代码,以下代码主要是从以下四个方面检测用户输入的密码的强度的,有兴趣的朋友可以自己添加或修改成自己想要的形式!

    1. 如果输入的密码位数少于5位,那么就判定为弱。
    2. 如果输入的密码只由数字、小写字母、大写字母或其它特殊符号当中的一种组成,则判定为弱。
    3. 如果密码由数字、小写字母、大写字母或其它特殊符号当中的两种组成,则判定为中。
    4. 如果密码由数字、小写字母、大写字母或其它特殊符号当中的三种以上组成,则判定为强。

    先来看看这个实现的效果吧!

    下面是具体利用Javascript检测用户输入密码强度的效果代码,文章结尾提供示例下载,有需要的朋友可以看看:

    html部分代码:

    <input name="password" type="PassWord" onKeyUp="CheckIntensity(this.value)">
    <table border="0" cellpadding="0" cellspacing="0">
      <tr align="center">
        <td id="pwd_Weak" class="pwd pwd_c">&nbsp;</td>
        <td id="pwd_Medium" class="pwd pwd_c pwd_f">无</td>
        <td id="pwd_Strong" class="pwd pwd_c pwd_c_r">&nbsp;</td>
      </tr>
    </table>

    css部分代码:

    .pwd{width:40px;height:20px;line-height:14px;padding-top:2px;}
    .pwd_f{color:#BBBBBB;}
    .pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}
    .pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}
    .pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}
    .pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}
    .pwd_c_r{border-right:1px solid #D0D0D0;}
    .pwd_Weak_c_r{border-right:1px solid #BB2B2B;}
    .pwd_Medium_c_r{border-right:1px solid #E9AE10;}
    .pwd_Strong_c_r{border-right:1px solid #267A12;}

    使用到的Js函数:

    function CheckIntensity(pwd){
      var Mcolor,Wcolor,Scolor,Color_Html;
      var m=0;
      var Modes=0;
      for(i=0; i<pwd.length; i++){
        var charType=0;
        var t=pwd.charCodeAt(i);
        if(t>=48 && t <=57){charType=1;}
        else if(t>=65 && t <=90){charType=2;}
        else if(t>=97 && t <=122){charType=4;}
        else{charType=4;}
        Modes |= charType;
      }
      for(i=0;i<4;i++){
      if(Modes & 1){m++;}
          Modes>>>=1;
      }
      if(pwd.length<=4){m=1;}
      if(pwd.length<=0){m=0;}
      switch(m){
        case 1 :
          Wcolor="pwd pwd_Weak_c";
    	  Mcolor="pwd pwd_c";
    	  Scolor="pwd pwd_c pwd_c_r";
    	  Color_Html="弱";
        break;
        case 2 :
          Wcolor="pwd pwd_Medium_c";
    	  Mcolor="pwd pwd_Medium_c";
    	  Scolor="pwd pwd_c pwd_c_r";
    	  Color_Html="中";
        break;
        case 3 :
          Wcolor="pwd pwd_Strong_c";
    	  Mcolor="pwd pwd_Strong_c";
    	  Scolor="pwd pwd_Strong_c pwd_Strong_c_r";
    	  Color_Html="强";
        break;
        default :
          Wcolor="pwd pwd_c";
    	  Mcolor="pwd pwd_c pwd_f";
    	  Scolor="pwd pwd_c pwd_c_r";
    	  Color_Html="无";
        break;
      }
      document.getElementById('pwd_Weak').className=Wcolor;
      document.getElementById('pwd_Medium').className=Mcolor;
      document.getElementById('pwd_Strong').className=Scolor;
      document.getElementById('pwd_Medium').innerHTML=Color_Html;
    }

    Javascript检测用户输入密码强度的效果下载

    您可能感兴趣的文章

    • Javascript将内容分享到各大社交平台网站的代码总结
    • 根据用户输入的Email跳转到相应的电子邮箱首页
    • js验证网址等Javascript常见验证代码合集
    • JavaScript 如何处理 php 返回json格式的数据
    • 通用的PHP防注入漏洞攻击的过滤函数代码
    • js实现点击enter键光标移到下一个输入框效果
    • Javascript解决左右高度自适应的问题
    • flash幻灯片切换效果代码,超简单超实用
    本站文章除注明转载外,均为本站原创或编译?;队魏涡问降淖?,但请务必注明出处。
    转载请注明:文章转载自 七星彩票平台
    本文标题:Javascript检测用户输入密码强度的效果代码
    IT技术书籍推荐:
    疯狂Java讲义(第3版)
    疯狂Java讲义(第3版)
    李刚 (作者)
    《疯狂Java讲义(第3版)》内容简介:《疯狂Java讲义(第3版)》是《疯狂Java讲义》的第3版,第3版保持了前两版系统、全面、讲解浅显、细致的特性,全面新增介绍了Java 8的新特性,《疯狂Java讲义(第3版)》大部分示例程序都采用Lambda表达式、流式API进行了改写,因此务必使用Java 8的JDK来编译、运行。 《疯狂Java讲义(第3版)》深入介绍了Java编程的相关方面,全书内容覆盖了Java的基本语法结构、Java的面向对象特征、Java集合框架体系、Java泛型、异常处理、Java GUI编程、JDBC数据库编程、Java注释、Java的IO流体系、Java多线程编程、Java网络通信编程和Java反射机制。覆盖了java.lang、java.util、java.text、java.io和java.nio、java.sql、java.awt、javax.swing包下绝大部分类和接口?!斗杩馢ava讲义(第3版)》全面介绍了Java 8的新的接口语法、Lambda表达式、方法引用、构造器引用、函数式编程、流式编程、新的日期、时间API、并行支持、改进的类型推断、重复注解、JDBC 4.2新特性等新特性。
    最新互联网资讯
    ActFramework 以 1.6.0 贺新年
    发布于 2018-01-01 20:20:02
    Newbe.Mahua 1.6 发布,新年第一版
    发布于 2018-01-01 18:20:03
    GnuCash 3.0 发布,开源记账工具
    发布于 2018-01-01 10:40:02
    FFmpeg 3.4 发布,多媒体处理工具合集
    发布于 2018-01-01 10:20:02