(转)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控制 ...
随机推荐
- [转]Windows中的句柄(handle)
1.句柄是什么? 在windows中,句柄是和对象一一对应的32位无符号整数值.对象可以映射到唯一的句柄,句柄也可以映射到唯一的对象.2.为什么我们需要句柄? 更准确地说,是windows需要 ...
- 【结构型】Adapter模式
Adapter模式主要意图是将类或接口转换成客户期望的接口,从而使得原本不兼容.无法在一起工作的接口可以在一起工作.该模式有两种形式的Adapter法,一是继承方式:二是对象关联依赖方式. 继承方式A ...
- Java Tomcat 中调用.net DLL的方法
近日一个java的项目,客户要求项目中必须使用其提供的加密机制,扔给了两个.net写的DLL.网络上搜了一圈也没找到啥东西,甚至看到人扬言此事绝无可能.郁闷当中考虑了一个思路.用C#做一个Com,调用 ...
- 深度围观block：第三集
深度围观block:第三集 发布于:2013-07-12 10:09阅读数:7804 本文是深度围观block的第三篇文章,也是最后一篇.希望读者阅读了之后,对block有更加深入的理解,同时也希望之 ...
- 使用dom4j生成xml字符串，以及解析xml字符串
基于dom4j-1.6.1.jar import java.io.IOException; import java.io.StringWriter; import java.util.ArrayLis ...
- ural 1348 Goat in the Garden 2
http://acm.timus.ru/problem.aspx?space=1&num=1348 #include <cstdio> #include <cstring&g ...
- 通过MYSQL命令行直接建数据库
因为同事要求,在进行MYSQLDUMP的导入库时,加一个日期标签, BUT,MYSQLDUMP的前提是数据库中要存在数据库名, 于是通过-e 参数执行命令. 这让我想起了前不久请教同事,如果AWK传变 ...
- python的工作记录A
马上进入工作自动化: [root@localhost ~]# cat svn_bbs.py import os,sys,commands,subprocess import re,time svnUr ...
- Oracle实例与Oracle数据库
数据库实例是用于和操作系统进行联系的标识,也就是说数据库和操作系统之间的交互使用的是数据库实例. 数据库实例名(instance_name) 实例名也被写入参数文件中,该参数为instance_nam ...
- Linux标准输入、输出和错误和文件重定向(转) --- good
标准输入.输出和错误 当我们在shell中执行命令的时候,每个进程都和三个打开的文件相联系,并使用文件描述符来引用这些文件.由于文件描述符不容易记忆,shell同时也给出了相应的文件名.下面就是这些文 ...