1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>密码强度</title>
  6. <script type="text/javascript" src="jquery.min.js"></script>
  7. <style type="text/css">
  8. /*密码强度*/
  9. .pw-strength {clear: both;position: relative;top: 8px;width: 180px;}
  10. .pw-bar{background: url(pwd-1.png) no-repeat;height: 14px;overflow: hidden;width: 179px;}
  11. .pw-bar-on{background:  url(pwd-2.png) no-repeat; width:0px; height:14px;position: absolute;top: 1px;left: 2px;transition: width .5s ease-in;-moz-transition: width .5s ease-in;-webkit-transition: width .5s ease-in;-o-transition: width .5s ease-in;}
  12. .pw-weak .pw-defule{ width:0px;}
  13. .pw-weak .pw-bar-on {width: 60px;}
  14. .pw-medium .pw-bar-on {width: 120px;}
  15. .pw-strong .pw-bar-on {width: 179px;}
  16. .pw-txt {padding-top: 2px;width: 180px;overflow: hidden;}
  17. .pw-txt span {color: #707070;float: left;font-size: 12px;text-align: center;width: 58px;}</style>
  18.  
  19. <script type="text/javascript">
  20. $(function(){
  21.     $('#pass').keyup(function () {
  22.         var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
  23.         var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
  24.         var enoughRegex = new RegExp("(?=.{6,}).*", "g"); 
  25.  
  26.         if (false == enoughRegex.test($(this).val())) {
  27.             $('#level').removeClass('pw-weak');
  28.             $('#level').removeClass('pw-medium');
  29.             $('#level').removeClass('pw-strong');
  30.             $('#level').addClass(' pw-defule');
  31.              //密码小于六位的时候，密码强度图片都为灰色
  32.         }
  33.         else if (strongRegex.test($(this).val())) {
  34.             $('#level').removeClass('pw-weak');
  35.             $('#level').removeClass('pw-medium');
  36.             $('#level').removeClass('pw-strong');
  37.             $('#level').addClass(' pw-strong');
  38.              //密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
  39.         }
  40.         else if (mediumRegex.test($(this).val())) {
  41.             $('#level').removeClass('pw-weak');
  42.             $('#level').removeClass('pw-medium');
  43.             $('#level').removeClass('pw-strong');
  44.             $('#level').addClass(' pw-medium');
  45.              //密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
  46.         }
  47.         else {
  48.             $('#level').removeClass('pw-weak');
  49.             $('#level').removeClass('pw-medium');
  50.             $('#level').removeClass('pw-strong');
  51.             $('#level').addClass('pw-weak');
  52.              //如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
  53.         }
  54.         return true;
  55.     });
  56. })
  57. </script>
  58.  
  59. </head>
  60. <body>
  61.  
  62. <table style="width:320px;margin:40px auto;">
  63.     <tr>
  64.         <th>密码</th>
  65.         <td><span  class="tbl-txt"><input id="pass" class="input-style" size="30" maxlength="30" name="pass" type="text" /></span></td>
  66.     </tr>
  67.     <tr>
  68.         <th></th>
  69.         <td id="level" class="pw-strength">
  70.             <div class="pw-bar"></div>
  71.             <div class="pw-bar-on"></div>
  72.             <div class="pw-txt">
  73.             <span>弱</span>
  74.             <span>中</span>
  75.             <span>强</span>
  76.             </div>
  77.         </td>
  78.     </tr>
  79. </table>
  80.  
  81. </body>
  82. </html>

下载地址：http://pan.baidu.com/s/1bn5A1Rp

jquery密码强度检测的更多相关文章

  1. CSS之密码强度检测

    输入密码后单击空白处即可检测. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...

  2. 基于规则评分的密码强度检测算法分析及实现(JavaScript)

    简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...

  3. 这篇文章主要为大家详细介绍了jQuery密码强度验证控件使用详解的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html>   <head>     <meta http-equiv="Cont ...

  4. (转)passwordStrength 基于jquery的密码强度检测代码使用介绍

    使用很简单. 代码如下: $('#pass').passwordStrength();  XHTML 代码如下: <p><label>请输入密码:</label>  ...

  5. jquery实现密码强度检测

    jquery实现密码强度验证   jquery实现密码强度验证 JS代码:   $('#pass').keyup(function(e) { var strongRegex = new RegExp( ...

  6. Jquery密码强度校验

    function passValidate(){ var password=$password.val().trim() if(password===""){ $mima.addC ...

  7. JS密码强度检测

    //校验密码强度---沒有匹配到以下級別就提示 function checkPassWord(value){ // 0: 表示第一个级别 1:表示第二个级别 2:表示第三个级别 // 3: 表示第四个 ...

  8. js动态判断密码强度&&实用的 jQuery 代码片段

    // 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...

  9. js密码强度

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 【Spring】Spring学习笔记-01-入门级实例

    听说当前Spring框架很流行,我也准备好好学学Spring开发,并将学习的过程和大家分享,希望能对志同道合的同学有所帮助. 以下是我学习Spring的第一个样例. 1.Spring开发环境的搭建 我 ...

  2. 常用Android开源框架

    1.volley 项目地址 https://github.com/smanikandan14/Volley-demo  (1)  JSON,异步下载图片:  (2)  网络请求的排序(scheduli ...

  3. C# winForm里窗体嵌套

    ShowAllPage sAllPage = new ShowAllPage();            sAllPage.FormBorderStyle = FormBorderStyle.None ...

  4. Apple Watch 1.0 开发介绍 1.3 简介 WatchKit App 架构

    WatchKit app和WatchKit extension一起实现了app的界面.当用户在Apple Watch中操作时,WatchKit app从storyboards中选择合适的场景.比如,如 ...

  5. Red Hat Enterprise Linux Server(RHEL) yum安装软件时This system is not registered with RHN. RHN support will be disabled. 的解决方法（转）

    新安装了redhat6.5.安装后,登录系统,使用yum update 更新系统.提示: This system is not registered to Red Hat Subscription M ...

  6. xCAT在多卡的物理机上装rhel6当需要人工选择网卡

    问题叙述性说明 今天装了双网卡的物理机器上rhel5如果一切顺利.但是,在安装rhel6时间不能选择安装自己主动网卡,它会弹出一个窗口,让选择em1依然是em2. 问题原因 原因是我在加入节点的时候使 ...

  7. SQL SERVER SQLOS的任务调度

    原文:SQL SERVER SQLOS的任务调度 原文地址:http://blogs.msdn.com/b/apgcdsd/archive/2011/11/24/sql-server-sqlos.as ...

  8. NBA球员 ESPN前20排名：詹姆斯再居榜首

    2014年 ESPN球员实力最后排名 没想到 保罗-乔治没有上榜.之前预測的火箭两大明星排名落后了,杜兰特排到第8有点出乎意料. 戴维斯升得那么快有点出乎意料,一个球队拥有两位排前十位的球队:骑士,快 ...

  9. Android：ViewPager扩展的具体解释——导航ViewPagerIndicator（有图片缓存，异步加载图片）

    我们已经用viewpager该. github那里viewpager扩展,导航风格更丰富.这个开源项目ViewPagerIndicator.非常好用,但样品是比较简单,实际用起来是非常不延长.例如,在 ...

  10. Java TCP/UDP网络通信编程

    本文转自:http://www.cnblogs.com/cdtarena/archive/2013/04/10/3012282.html 网络应用中基本上都是TCP(Transmission Cont ...