(转)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控制 ...
随机推荐
- C/C++中的&&和||运算符
代码: #include <iostream> #include <cstdio> using namespace std; int main(){ ,b=,c=-,d=; d ...
- Delphi 串口打印机打印
一.硬件准备 打印机: 打印机必须具有串口,没有标配串口的打印机,必须购买串口卡,串口卡的型号请参考随机<操作手册>. 计算机: 计算机必须具有串口,计算机通常具有两个串口:COM1和CO ...
- jquery在不同浏览器获取文件路径出现问题！
<input type="file" name="file" id="file1" src=""/> < ...
- C#中的委托和事件2-2（转）
引言 如果你看过了 C#中的委托和事件2-1 一文,我想你对委托和事件已经有了一个基本的认识.但那些远不是委托和事件的全部内容,还有很多的地方没有涉及.本文将讨论委托和事件一些更为细节的问题,包括一些 ...
- C写的扫描器源码
Title:C写的扫描器源码 --2010-10-27 20:02 无意间看见的一个源代码,弄回来读下. ----------------------------------------------- ...
- LeetCode_Single Number II
Given an array of integers, every element appears three times except for one. Find that single one. ...
- Open Wifi SSID Broadcast vulnerability
Open Wifi SSID Broadcast vulnerability 0x00 前言 前几天,看到微博上@RAyH4c分享了一份老外关于wifi钓鱼的文章,觉得挺好的,便翻译了一下.第一次翻译 ...
- GitHub的使用详解！Windows GitHub ，Sublime Git GitGutter的使用！
Github是什么? 它是代码管理工具. 在公司写的代码,不需要U盘拷贝回家,不需要放到网盘中.只需要上传到git上,就可以回家继续拷贝下来了. 比起svn要好, svn只适合局域网工作,离开局域网, ...
- COJ 0979 WZJ的数据结构（负二十一）
WZJ的数据结构(负二十一) 难度级别:C: 运行时间限制:5000ms: 运行空间限制:262144KB: 代码长度限制:2000000B 试题描述 请你实现一个数据结构,完成这样的功能: 给你一个 ...
- BZOJ3391: [Usaco2004 Dec]Tree Cutting网络破坏
3391: [Usaco2004 Dec]Tree Cutting网络破坏 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 47 Solved: 37[ ...