• 消协提醒:春节预订酒店有技巧 预付卡消费需谨慎 2018-10-20
  • 陈敏尔唐良智会见传化集团董事长徐冠巨 2018-10-20
  • 扫黑除恶利剑高悬 前8月榕查处违法采砂案件93起 2018-10-20
  • 不能让所谓的收视率愚弄观众 2018-10-18
  • 新希望!中超19岁新星半年增重十斤 曾戏耍恒大两国脚 2018-10-17
  • 迎丰收 晒丰收 庆丰收 2018-10-15
  • “捂脸表情”被注册成商标?申请人不认为商标侵权 2018-10-15
  • 战巡南海、绕岛巡航…空军有“飞出去”的主心骨 2018-10-14
  • 幼儿园要求家长写一万字读后感:不能这样玩家长|幼儿园|家长-教育时讯 2018-10-13
  • 中国故宫文物展在希腊举行 2018-10-13
  • 車·晓 第26期 車企官方降价真相幾何? 2018-10-12
  • 宝沃总裁杨嵩:曾和奔驰宝马同水平 已不能同日而语 2018-10-11
  • 新时代党员干部要有更大的担当和作为 2018-10-10
  • “2018-雷霆”专项行动破获百余起台湾间谍案 2018-10-09
  • 朝韩首脑今起在平壤会晤 “金文会”将聚焦三大议题 2018-10-09
  • 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