(转)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控制 ...
随机推荐
- Box model小心得
最近在研究css~当设置一个元素width后~有时候也会对他设定padding,margin,border值, 每次这样我就心里琢磨,那这个元素的width会变吗,js获取元素的宽度width()指的 ...
- Thinkphp 模版
1.显示模版 在Home/Controller/MainController.class.php中写一个方法来显示对应的模版 function text() { //变量输出 $this->as ...
- Android Init进程命令的执行和服务的启动
这里开始分析init进程中配置文件的解析,在配置文件中的命令的执行和服务的启动. 首先init是一个可执行文件,它的对应的Makfile是init/Android.mk. Android.mk定义了i ...
- [算法导论]贪心算法(greedy algorithm)
转载请注明出处:http://www.cnblogs.com/StartoverX/p/4611544.html 贪心算法在每一步都做出当时看起来最佳的选择.也就是说,它总是做出局部最优的选择,寄希望 ...
- 通知栏快捷按钮自定义教程以及快捷面板提取的思路-转自魔趣论坛-lonyii2
原帖地址: http://bbs.mfunz.com/forum.php?mod=viewthread&tid=235198&extra=page%3D1%26filter%3Dtyp ...
- Linux下的QQ折腾记
用Linux最重要是要把QQ装好了,webqq很不好用.qq for linux是古董,Linux还是悲惨,很多软件有windows版本,有mac版本,就是不出linux版本.只好用wine来 ...
- ACM2055_ctype.h_cctype
#include<iostream> int main() { using namespace std; int y,count; char x; cin>>count; wh ...
- 深入理解linux网络技术内幕读书笔记(七)--组件初始化的内核基础架构
Table of Contents 1 引导期间的内核选项 2 注册关键字 3 模块初始化代码 引导期间的内核选项 linux运行用户把内核配置选项传给引导记录,然后引导记录再把选项传给内核. 在引导 ...
- 形形色色的软件生命周期模型（4）——MSF、实用型
摘要: 读大学时,我们曾经学习过不少软件生命周期模型,当时还不是很懂软件开发,你可能会觉得这些东西很新奇.在实际工作中,你会发现这些模型其实很难应用,与此同时你会接触到RUP.MSF等权威软件公司的生 ...
- 深度分析Linux下双网卡绑定七种模式
现在一般的企业都会使用双网卡接入,这样既能添加网络带宽,同时又能做相应的冗余,可以说是好处多多.而一般企业都会使用linux操作系统下自带的网卡绑定模式,当然现在网卡产商也会出一些针对windows操 ...