(转)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控制 ...
随机推荐
- 多线程09-Lock和Condition
1.概念 Lock比传统线程模型中的synchronized方式更加面向对象,与生活中的锁类似,锁本身也应该是一个对象.两个线程执行的代码片段要实现同步互斥的效果,它们必须用同一个Lock对象. 2. ...
- Oracle错误问题---- 《ora-12638：身份证明检索失败》
使用客户端可以连接,但只有一个站点出现此问题,非常郁闷,网上查了一下,发现是用户认证问题,解决办法如下: 在ORACLE客户端目录下 NETWORK/ADMIN下的sqlnet.ora,使用记事本打开 ...
- jQuery的map()与jQuery.map()总结
请注意他们不是同一个函数.前者是jQuery对象的实例方法(即$.fn.map),后者是一个仅仅挂在jQuery对象下的静态方法(即$.map). 他们用法的异同:map()的返回值是包裹了一个Arr ...
- php的冒泡算法
<?php /* 冒泡算法 * @para $arr 传人进去排序的数组 * @return $newArr 排序之后的数组 */ function maopao($arr){ ...
- memcache配置与使用
php100:73:MemCached高级缓存配置 Memcache相关介绍: memcache 是一个高性能的分布式的内存对象缓存系统,它能够存储各种各样的的数据,包括图片,视频,文件等等.缓存功能 ...
- PHP浮点数的一个常见问题的解答
作者: Laruence 本文地址: http://www.laruence.com/2013/03/26/2884.html 转载请注明出处 关于PHP的浮点数, 我之前写过一篇文章: 关于PHP浮 ...
- 突破路由mac地址过滤思路
一.获取合法的mac地址 在拿到无线网络的密码时,主要思路就是,用类似airodump-ng这类监听软件(WildPackets OmniPeek,Kismet),获得合法客户端的mac地址,然后再更 ...
- Qt编程之QString 处理换行
由于之间写过的一篇文章,Unix,windows,Mac里面的换行符不一样,导致处理也不一样,我现在要用QString以行分割(读取的文本文件的里面有换行符).所以要通吃这三种换行符 http://w ...
- Android比较字符串是否为空(isEmpty)
StringUtils.java: package com.yx.equipment_collection.utils; import android.annotation.SuppressLint; ...
- nginx入门配置
user www www; worker_processes 4; error_log logs/error.log; #pid logs/nginx.pid; events { worker_con ...