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 ...
随机推荐
- cocos2d-x游戏开发(十六)帧动画
欢迎转载:http://blog.csdn.net/dawn_moon/article/details/11775745 本来想写一下帧动画的,搜了一下网上好像有一大把,就懒得写了,直接贴代码. // ...
- 国产编程语言R++ V1.5发布
R++ v1.5内核改动较大,下面是一些主要变化: 1.使用PJIT(Pseudocode Just-In-Time),编译速度大幅提高,但运行效率远远不如C++,不过R++将在下一版本支持RJIT( ...
- ios中的ＧＣＤ
前面我们说了block中提到它用于多线程,而gcd则是其用于多线程的典型.gcd其全称(Grand Central Dispatch) 那到底什么叫gcd,官方的解释如下: Grand Central ...
- Codeforce 424C Magic Formulas 找规律
题目链接:http://codeforces.com/contest/424/problem/C 题意:求Q值 思路:找规律 显然能够得到一个矩阵 把这个矩阵画出来就能发现一个横向的规律和一个主对角线 ...
- PDFium-PDF开源之旅(1)-初探代码下载编译
近日,Google和Foxit合作开源了Foxit的PDF源代码. 叫PDFium 相关新闻不少.哈,虽说已经不是程序猿了.只是还是有兴趣跑起来围观看看.废话少说.先说编译代码的步骤(事实上Googl ...
- ZOJ 2770 Burn the Linked Camp(spfa&&bellman)
//差分约束 >=求最长路径 <=求最短路径 结果都一样//spfa#include<stdio.h> #include<string.h> #include< ...
- sql--关于exec和sp_execute
sql:exec与sp_excutesql的比较 exec与sp_execute都可以执行存储过程和批处理动态sql语句,以下所属均是关于批处理动态sql语句方面. 一.关于输入参数与输出参数 1.使 ...
- 【C++】基于socket的多线程聊天室（控制台版）
以前学习socket网络编程和多线程编程的时候写的一个练手程序 聊天室基本功能: 1.用户管理:登录,注册,登出,修改用户名,修改密码 2.聊天室功能:群聊,私聊,获取在线用户列表,获取所有用户列表 ...
- Java反射的小故事
Java反射的小故事: 首先定义一个Java类 package com.xiaoysec.test; public class Person { private String name; privat ...
- JAVA_用_JCO连接_SAP，实现调用SAP_的_RFC_函数(整理)(附一篇看起来比较全面的说明)(JCO报错信息)
// 获取RFC返回的字段值 11 JCoParameterList exportParam = function.getExportParameterList(); 12 String exPara ...