javascript 检测密码强度美化版

模仿美团的美化

<!DOCTYPE>

<head runat="server">

<title></title>

<link rel="stylesheet" type="text/css" href="mima.css">

<script src="jquery-1.9.0.min.js"></script>

<script src="MeForCopy.js"></script>

</head>

<body>

<form name="form1" action="">

    <input type="password" size="10" id="password">

    <br>

    <div class="pw-strength">

        <div id="J-pw-strength__bar" class="pw-strength__bar"></div>

        <div class="pw-strength__letter">

            <span class="pw-strength__label">L</span>

            <span class="pw-strength__label">M</span>

            <span class="pw-strength__label pw-strength__label--noborder">H</span>

        </div>

    </div>

    <div id="msg"></div>

</form>

</body>

</html>

  $(function() {

    $("#password").blur(function(event) {

      /* Act on the event */

      var psw = $(this).val(); //okay

      pwStrength(psw);

    });

    $("#password").keyup(function(event) {

      /* Act on the event */

      var psw = $(this).val(); //okay

      pwStrength(psw);

    });

  });

  function pwStrength(psw) {

    if (psw == '') {

      $("#msg").text('no');

      $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar');

    } else {

      S_level = checkStrong(psw);

      switch (S_level) {

        case 0:

          $("#msg").text('no');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar');

        case 1:

          $("#msg").text('weak');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--weak');

          break;

        case 2:

          $("#msg").text('normal');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--normal');

          break;

        default:

          $("#msg").text('Strong');

          $(".pw-strength__bar").removeAttr('class').addClass('pw-strength__bar').addClass('pw-strength__bar--strong');

      }

    }

  }

  function checkStrong(sPW) {

    if (sPW.length <= 4) {

      return 0; //密码太短

    }

    Modes = 0;

    for (i = 0; i < sPW.length; i++) {

      //测试每一个字符的类别并统计一共有多少种模式.

      Modes |= CharMode(sPW.charCodeAt(i));

    }

    return bitTotal(Modes);

  }

  //CharMode函数

  //测试某个字符是属于哪一类.

  function CharMode(iN) {

    if (iN >= 48 && iN <= 57) //数字

      return 1;

    if (iN >= 65 && iN <= 90) //大写字母

      return 2;

    if (iN >= 97 && iN <= 122) //小写

      return 4;

    else

      return 8; //特殊字符

  }

  //bitTotal函数

  //计算出当前密码当中一共有多少种模式

  function bitTotal(num) {

    modes = 0;

    for (i = 0; i < 4; i++) {

      if (num & 1) modes++;

      num >>>= 1;

    }

    return modes;

  }

CSS

.pw-strength {

    background: none repeat scroll 0 0 #C9E0DD;

    left: 80px;

    position: absolute;

    top: 45px;

    width: 234px;

}

.pw-strength__bar {

    background: none repeat scroll 0 0 #C9E0DD;

    height: 16px;

    overflow: hidden;

    width:;

    -moz-transition: all 0.4s linear 0s;

    transition: all .4s linear;

    -webkit-transition: all .4s linear;

    -moz-transition: all .4s linear;

    -o-transition: all .4s linear;

}

.pw-strength__letter {

    left:;

    position: absolute;

    top:;

}

.pw-strength__bar--normal {

    background: none repeat scroll 0 0 #F1D93A;

    width: 154px;

}

.pw-strength__bar--weak {

    background: none repeat scroll 0 0 #EA9292;

    width: 76px;

}

.pw-strength__bar--strong {

    background: none repeat scroll 0 0 #5AAC47;

    width: 232px;

}

.pw-strength__label {

    border-right: 2px solid #FFFFFF;

    color: #FFFFFF;

    display: block;

    float: left;

    font-size: 12px;

    height: 16px;

    line-height: 16px;

    text-align: center;

    width: 76px;

}

javascript 检测密码强度美化版的更多相关文章

javascript 检测密码强度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
JS正则检测密码强度
今天遇到个需求,使用JS检测密码强度:密码长度最短为8,必须同时包含字母.数字.特殊符号. 代码如下: /* * 检测密码复杂度 */ function ...
JavaScript判断密码强度
以下是代码: <html> <head> <title>JS判断密码强度</title> <script language=javascript& ...
JavaScript验证密码强度
JavaScript的方法: <script type="text/javascript"> window.onload = function () { documen ...
js检测密码强度
<script> function AuthPasswd(string) { if(string.length >=6) { if(/[a-zA-Z]+/.t ...
[No0000CE]检测非空格字符作为密码的密码强度
Regex.Replace(pwd, "^(?:([a-z])|([A-Z])|([0-9])|(.)){6,}|(.)+$", "$1$2$3$4$5").L ...
js动态判断密码强度&&实用的 jQuery 代码片段
// 网上拷贝的代码,效果不太好需要自己调整<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &q ...
js密码强度
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
密码强度应用(js)
 <div id="tips" class="help-block"> <b class=&quo ...

随机推荐

工作学习笔记——GDI泄露检测利器
用.Net写的地图编辑器,最近在一个长时间使用的策划手里频繁挂掉.定位到原因应该是GDI泄露.但在几千行代码里手工寻找泄漏点实在是有些困难,直到在网上找到了这个检测GDI泄露的工具GDILeaks.它 ...
hdu 1394 zoj 1484 求旋转序列的逆序数（并归排序）
题意:给出一序列,你可以循环移动它(就是把后面的一段移动到前面),问可以移动的并产生的最小逆序数. 求逆序可以用并归排序,复杂度为O(nlogn),但是如果每移动一次就求一次的话肯定会超时,网上题解都 ...
Android应用开发基础篇（1）-----Button
Android应用开发基础篇(1)-----Button 一.概述 Button,顾名思义就是按钮的意思,它主要的功能是响应用户按下按钮时的动作. 二.应用新建一个工程, ...
Ubuntu_16.04 配置 Apache Rwrite URL 重写
Ubuntu Apache配置Rwrite URL重写 0. apache目录
[SAP] 外部系统调用SAP web service用户验证的简单方法
场景: 一个Java系统调用SAP系统提供的web service,除了根据WSDL生成的代理类,调用相应方法,传入相应参数外,还等需要使用SAP提供的用户信息进行身份验证,最简单的方法是在soap请 ...
UITextView 限制输入字数
尊重原创 http://blog.csdn.net/fengsh998/article/details/45421107 对于限制UITextView输入的字符数.相信大家在网上见得最多的是实现UI ...
BestCoder Round #38
1001 Four Inages Strategy 题意:给定空间的四个点,判断这四个点是否能形成正方形思路:判断空间上4个点是否形成一个正方形方法有很多,这里给出一种方法,在p2,p3,p4中枚举 ...
servlet三种实现方式之二继承GenericServlet开发
servlet有三种实现方式: 1.实现servlet接口 2.继承GenericServlet 3.通过继承HttpServlet开发servlet 第二种示例代码如下(已去掉包名): //这是第二 ...
JavaScript表单验证年龄
JavaScript表单验证年龄,判断一个输入量是否符合年龄,通过正则表达式实现. //检查年龄 function isAge(str){ var mydate=new Date; var now=m ...
php 通过referer防盗链（以图片为例）
1.在网页里访问站外图片时,服务器如何知道是在站外引用的呢? (1)对比本服务器请求与跨服务器请求图一——本服务器请求图二——显示盗链的referer信息通过对比也就知道referer显示的是引 ...

javascript 检测密码强度 美化版

javascript 检测密码强度 美化版的更多相关文章

随机推荐

热门专题

javascript 检测密码强度美化版

javascript 检测密码强度美化版的更多相关文章