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>
JS
$(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 --> <div id="tips" class="help-block"> <b class=&quo ...
随机推荐
- UVA-Matrix Chain Multiplication（栈）
Matrix Chain Multiplication Suppose you have to evaluate an expression like A*B*C*D*E where A,B,C, ...
- 第三章 用 PowerShell 进行远程管理（remoting）
第三章 用 PowerShell 进行远程管理(remoting) PowerShell V2 引进了一项强大的新技术,远程(remoting),PowerShell V3 进行了完善和扩展.主要基于 ...
- 项目管理：关于SVN的实践
SVN是Subversion的简称,是一个开放源码的版本号控制系统. 合作开发的时候,对SVN的使用有3个软件:SVN的server端,SVNclient(也就是Tortoise SVN,寻常chec ...
- java面试核心基础（1）
1.以下代码的执行结果 String s1 = "helloworld"; String s2 = "hello" + new Stirng("wor ...
- docker基础入门之二
一.docker文件系统: linuxFS包括boot file system 和 root file system boot file system (bootfs),包含bootloader和ke ...
- GDB调试之core文件（如何定位到Segment fault）
core dump又叫核心转储,当程序运行过程中发生异常,程序异常退出时,由操作系统把程序当前的内存状况存储在一个core文件中,叫core dump.(内部实现是:linux系统中内存越界会收到SI ...
- nginx 使用安装问题及解决方案
如何安装清参考:http://www.runoob.com/linux/nginx-install-setup.html 可以先不用配置,等理解后在配置. 在启动nginx时,出现提示: nginx: ...
- XML 文档解析操作
sing System;using System.Data;using System.Configuration;using System.Web;using System.Web.Security; ...
- zoj 2966 Build The Electric System
就是套了个prim算法就ac了 #include <stdio.h> #include <string.h> #define MaxInt 0x3f3f3f3f #define ...
- BZOJ 1927: [Sdoi2010]星际竞速(最小费用最大流)
拆点,费用流... ----------------------------------------------------------------------------- #include< ...