(转)passwordStrength 基于jquery的密码强度检测代码使用介绍
使用很简单。
XHTML
<input type="password" id="pass" class="input" /></p>
<div id="passwordStrengthDiv" class="is0"></div>
<p><label>确认密码：</label>
<input type="password" id="repass" class="input" /></p>
注意：id#passwordStrengthDiv的DIV是用来加载强度图片的，你也可以自定义ID，但调用时就要给参数赋值：
载入JS和CSS：
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('#pass').passwordStrength();
});
</script>
现在很多注册页面都能显示密码强度，告诉用户使用复杂度高的密码。
现在有很多实现类似功能的js。基本原理都是：使用js触发text表单输入元素的keyup事件，根据输入字符的长度以及类型数量（比如数字，小写字母，大写字母，特殊字符等）动态修改提示元素的样式和文本。
下面演示的passwordStrength插件是基于jQuery的。
该插件使用一幅包含10个状态的图片显示密码强度。根据密码的输入，动态设置图片的垂直偏移量，达到切换不同状态的效果。
下面将该插件应用到asp.net应用程序中：
1、解压压缩包后，将password_strength.css文件放置到主题文件夹下（如果网站通过主题设置页面样式的话），否则，将该文件放置在css文件夹下。
该文件的样式定义如下：
.is0{background:url(../images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background-position:0 -7px;}
.is20{background-position:0 -14px;}
.is30{background-position:0 -21px;}
.is40{background-position:0 -28px;}
.is50{background-position:0 -35px;}
.is60{background-position:0 -42px;}
.is70{background-position:0 -49px;}
.is80{background-position:0 -56px;}
.is90{background-position:0 -63px;}
.is100{background-position:0 -70px;}
2、如果使用了主题，则在主题文件夹下创建一个images文件夹，然后将progressImg1.png文件放置在文件夹下。此时应该修改上面的第一行样式类iso的图片地址为：url(images/progressImg1.png)，其他不变。
3、然后新建一个页面，比如说注册页面。可以输入以下代码：
<td align="left">
<asp:TextBox runat ="server" ID="txtPwd" TextMode ="Password"></asp:TextBox>
<img src="" id="imgPwd" alt=""/><span id="spanPwd" class="alertTip"></span>
<div id="passwordStrengthDiv" class="is0"/>
<p class="regTooltip">（必填）密码长度要在6-18位之间，只能由字符（a-z）、数字（0-9）和下划线（_）组成</p>
</td>
注意上述代码的红色部分，id使用的是默认值，因为在js插件中，会默认查找该ID的元素（如下红色代码），并将状态图片显示在此。也可以修改，但要求js和页面要保持一致。
$.fn.passwordStrength.defaults = {
classes : Array('is10','is20','is30','is40','is50','is60','is70','is80','is90','is100'),
targetDiv : '#passwordStrengthDiv',
cache : {}
}
4、然后在页面中引入jQuery库和插件，并编写如下代码：
<head runat="server">
<title></title>
<script src="/js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/jquery.passwordStrength.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("input[id$=txtNewPwd]").passwordStrength();
});
</script>
</head>
注意密码框是服务器控件。
下图是演示效果：
扩展：上面的方法，页面初始加载时，图片默认显示。也可以修改让状态图片，在密码输入后才显示。
修改方法：
首先样式文件改成：
.is0{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;}
.is10{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -7px;}
.is20{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -14px;}
.is30{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -21px;}
.is40{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -28px;}
.is50{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -35px;}
.is60{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -42px;}
.is70{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -49px;}
.is80{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -56px;}
.is90{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -63px;}
.is100{background:url(images/progressImg1.png) no-repeat 0 0;width:138px;height:7px;background-position:0 -70px;}
然后，将显示状态的div中的class去掉：
<div id="passwordStrengthDiv"></div>
其他代码保持不变。
(转)passwordStrength 基于jquery的密码强度检测代码使用介绍的更多相关文章
- jquery实现密码强度检测
jquery实现密码强度验证 jquery实现密码强度验证 JS代码: $('#pass').keyup(function(e) { var strongRegex = new RegExp( ...
- 基于规则评分的密码强度检测算法分析及实现(JavaScript)
简言 用正则表达式做用户密码强度的通过性判定,过于简单粗暴,不但用户体验差,而且用户帐号安全性也差.那么如何准确评价用户密码的强度,保护用户帐号安全呢?本文分析介绍了几种基于规则评分的密码强度检测算法 ...
- CSS之密码强度检测
输入密码后单击空白处即可检测. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 基于jQuery垂直多级导航菜单代码
基于jQuery垂直多级导航菜单代码是一款黑色风格的jQuery竖直导航菜单特效下载.效果图如下: 在线预览 源码下载 实现的代码. html代码: <ul class="ce&q ...
- 基于jQuery图片自适应排列显示代码
基于jQuery图片自适应排列显示代码.这是一款基于jquery.flex-images插件实现的类似谷歌图片流效果.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery在线问卷答题系统代码
分享一款基于jQuery在线问卷答题系统代码是一款实用的jQuery答题插件,点击下一题切换带有淡入淡出效果.实现的效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 基于jQuery左右滑动切换图片代码
分享一款基于jQuery左右滑动切换图片代码.这是一款基于jQuery实现的左右滑动切换焦点图代码.效果图如下: 在线预览 源码下载 实现的代码: <div class="v_ou ...
- 基于jquery右侧悬浮加入购物车代码
分享一款基于jquery右侧悬浮加入购物车代码.这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码. 在线预览 源码下载 实现的代码: <!--左侧产品parabola.js控制 ...
随机推荐
- 数据库（批处理， 事务，CachedRawSetImpl类
链接对象son产生的Statement SQL对象对数据库提交的任何一条语句都会被立刻执行 不方便我们进行一些连招操作 我们可以关闭它的自动提交,然后操作完再开,这过程称作事务 con.setAuto ...
- poj1182 并查集
题目连接:http://poj.org/problem?id=1182 基础并查集,需要维护与根节点关系,解析见代码: /* poj 1182 并查集 思路分析:让你分析这些话里面多少假的 只需要用 ...
- 《Linux内核分析》 week2作业-时间片轮转
一.基于时间片轮转调度代码的解读 代码结构主要由三个文件组成: 1.mypcb.h 2.myinterrupt.c 3.mymain.c 1.进程控制块(mypcb.h) /* CPU-specifi ...
- C++ Primer 5th 第9章 顺序容器
练习9.1:对于下面的程序任务,vector.deque和list哪种容器最为适合?解释你的选择的理由.如果没有哪一种容器优于其他容器,也请解释理由.(a) 读取固定数量的单词,将它们按字典序插入到容 ...
- SelectObject
CPen* SelectObject( CPen* pPen ); CBrush* SelectObject( CBrush* pBrush ); virtual CFont* SelectObjec ...
- js数组(列表)的基本操作
本文主要介绍JS对数组(列表)的基本操作.习惯了用数据库的操作顺序来说明:增.删.改.查:合并,裁剪,排序,格式化. 一.数组元素的添加(增加) 增加数组元素有三种方法:unshift() push ...
- TimeZone 时区 (JS .NET JSON MYSQL)
来源参考 : http://www.cnblogs.com/qiuyi21/archive/2008/03/04/1089456.html 来源参考 : http://walkingice.blogs ...
- Windows登录脚本可以限制并发登录吗
在Windows服务器中,使用一个Windows登录脚本来限制并发会话靠谱吗? 事实上,这种解决方案存在很多缺点和弱点,并不能满足大中型IT基础设施的安全性需求. 一.使用登陆脚本限制并发会话,恶意用 ...
- Cplus
1,factorials[i] = i * factorials[i - 1]; #include <iostream>using namespace std; const int ArS ...
- Java 8 默认方法和多继承深入解析
以前经常谈论的Java对比c++的一个优势是Java中没有多继承的问题. 因为Java中子类只能继承(extends)单个父类, 尽管可以实现(implements)多个接口,但是接口中只有抽象方法, ...