jQuery插件之密码强度检测

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

一、参数:

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

二、用法:

HTML代码:

6个或更多字符! 要复杂些。

密码很完美!

密码复杂度还可以。

密码强度还可以更高

密码

CSS代码:

.holding {
	position: relative;
}
.holding input {
	outline: 0;
	padding: 8px 6px;
	width: 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 {
	width: 50px;
	height: 8px;
	display: inline-block;
	overflow: hidden;
	background-color: #EEE;
	vertical-align: middle;
	border-radius: 3px;
}
.score span b {
	display: block;
	height: 8px;
	width: 25px;
	background-color: #6EC02A;
}
.sidetip {
	position: absolute;
	top:0;
	left: 404px;
	width: 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){
}})

演示

“jQuery插件之密码强度检测”的4个回复

  1. 请问楼主,jquery.password.js的返回值怎么处理啊,就是我想知道他是否验证成功了,怎样取到返回值进行处理呀?菜鸟请教~~

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

发表评论

电子邮件地址不会被公开。 必填项已用*标注