jQuery插件之密码强度检测

jquery.password.js是PasswordStrength.js的jQuery升级版，实现了类似于twitter注册页面的密码强度检测效果.

一、参数：

val:密码，默认为$(this).val()
score：强度指示器，默认为$(‘.score b’)
banned：过滤字符：默认为twitter禁止注册的字符
minChar：密码最小字符，默认为6
username：用户名，用于检测密码是否和用户名相同
requireStrong：强密码检测模式

二、用法：

HTML代码：

<div class="password">
  <div class="holding" data-fieldname="password">
    <div class="sidetip">
      <p class="tip">6个或更多字符! 要复杂些。</p>
      <p class="perfect isaok">密码很完美! </p>
      <p class="ok isaok">密码复杂度还可以。</p>
      <p class="weak isaok">密码强度还可以更高</p>
      <p class="weak error" role="alert">密码不够安全。</p>
      <p class="obvious error" role="alert">密码太明显啦。</p>
      <p class="invalid error" role="alert">密码最少为 6 位。不能包含空格。</p>
      <p class="blank error" role="alert">密码不能为空!</p>
    </div>
    <input type="password" value="" name="password"  />
    <span class="holder">密码</span> </div>
  <div class="score"><span><b></b></span></div>
</div>

CSS代码：

.holding {
	position: relative;
}
.holding input {
	outline: 0;
	padding: 8px 6px;
	 382px;
	border: 1px solid #CCC;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.2);
	-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1), 0 1px 0 rgba(255,255,255,0.2);
	line-height:1.5;
}
.holding .holder {
	position: absolute;
	top: 0;
	left: 10px;
	z-index: 1;
	color: #DDD;
	font: 20px "Helvetica Neue", Helvetica, Arial, sans-serif;
	line-height:37px;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
	white-space: nowrap;
	-webkit-transition: opacity .1s, font-size .1s;
	-moz-transition: opacity .1s, font-size .1s;
	-o-transition: opacity .1s, font-size .1s;
}
.holding input:focus {
	border-color: rgba(82, 168, 236, .75);
	box-shadow: 0 0 8px rgba(82,168,236,.5);
	-moz-box-shadow: 0 0 8px rgba(82,168,236,.5);
	-webkit-box-shadow: 0 0 8px rgba(82,168,236,.5);
}
.holding input:focus + label.holder {
	opacity: .6;
}
.hasome input {
	color:#333
}
.hasome .holder {
	opacity:0;
	filter:alpha(opacity=0);
	font-size:0!important
}
.score {
	display:none;
	position: absolute;
	margin-top: -27px;
	margin-left: 334px;
}
.score span {
	 50px;
	height: 8px;
	display: inline-block;
	overflow: hidden;
	background-color: #EEE;
	vertical-align: middle;
	border-radius: 3px;
}
.score span b {
	display: block;
	height: 8px;
	 25px;
	background-color: #6EC02A;
}
.sidetip {
	position: absolute;
	top:0;
	left: 404px;
	 250px;
	margin-top: 10px;
}
.sidetip p {
	display: none;
	padding-left: 18px;
	background-repeat: no-repeat;
	background-position: center left;
	color: #FFF;
	font-size: 13px;
	line-height: 16px;
}
.sidetip p.tip {
	padding-left: 0;
}
.sidetip p.isaok {
	background-image:url(password/images/accept.png);
	color: #390;
}
.sidetip p.checking {
	background-image: url(password/images/spinner-small.gif);
}
.sidetip p.error {
	background-image: url(password/images/error.png);
	color: #C33;
}
.sidetip p.active {
	display: block;
}

jQuery代码：

$(function(){
	$(".holding input").live("paste cut keydown keyup focus", 
    function() {
        $.trim($(this).val()) != "" && $(this).parent().addClass("hasome")
    }),
    $(".holding input").blur(function() {
        $.trim($(this).val()) == "" && $(this).parent().removeClass("hasome")
    })
    $('#password').live("paste cut keydown keyup blur", function(){
	$.trim($(this).val()) != "" ? ($('.score').show() && $(this).password()) : $('.sidetip .tip').addClass('active');
    })
})

三、返回参数：

/*isValid:是否有效，值：true/false
 *tipClass:提示：值：string
* score:得分，值：number
*/
$.password({callback:function(a,b,c){
}})


演示：http://www.hujuntao.com/demo/?file=password/jquery.password.html

jQuery插件之密码强度检测

相关推荐