• 遭爆校长任期炒高房价请假率高 吴茂昆:旧案重提悖离事实 2018-08-19
  • 2018年洗衣机市场健康洗产品已成市场新引擎 2018-08-19
  • 大学毕业生创业“修手机” 两个月进账超30万元 2018-08-19
  • 張近東代表建議,用AI、區塊鏈技術打造數據安全“護城河” 2018-08-18
  • 清明忆先烈 习近平这样传承“红色基因” 2018-08-18
  • 第二届福建省大学生文化创新创意大赛落幕 2018-08-18
  • 乘客突发脑梗 611路司机忙送医一直等到家属到 2018-08-18
  • 中国新一代百亿亿次超级计算机“天河三号”原型机首次亮相[组图] 2018-08-17
  • “动静”结合丨带你感受不一样的实爆训练场 2018-08-17
  • 侠客岛:拿什么拯救你,不学普通话的香港年轻人 2018-08-17
  • 机构改革是一场政治考验 2018-08-17
  • 简讯:韩国前总统朴槿惠一审被判24年有期徒刑 2018-08-16
  • 人民网评:走向大洋,呼唤现代化的中国海军 2018-08-16
  • 北京成立学生申诉处理委员会-地方新闻-时政频道-中工网 2018-08-16
  • 虽胜不足喜!鲁能一隐忧不治愈,恐高开低走 2018-08-16
  • 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