我们讲解下使用passwordStrength插件,该插件可以检测密码强度，根据输入密码的简单程度下面的颜色会有相应的变化，比如输入123456或者大小写字母，特殊符号，长度等等都有相应的提示，在检测用户密码强度的经常用到
我们看看代码效果
我们输入大小码字符和长度更长看看效果
我们看到颜色变深了。怎么使用呢
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>passwordStrength</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength();
})
</script>
<style type="text/css">
.is0{background:url(//freemuban.com/js/507/progressImg1.png) no-repeat 0 0;width:138px;height:7px;margin:10px 0 0 104px;}
.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;}
#autotab input { width:138px; }
</style>
</head>
<body>
<h1>passwordStrength密码强度指标</h1>
<form action="" method="post" id="autotab" class="p1">
<label>请输入密码：
<input type="password" name="password" />
<div id="passwordStrengthDiv" class="is0"></div>
</label>
</form>
</body>
</html>
demo2
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>passwordStrength</title>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="//freemuban.com/js/507/passwordStrength.js"></script>
<script type="text/javascript">
$(function(){
$('input[name="password"]').passwordStrength({
targetDiv: '#passwordStrengthDiv',
classes : Array('is10','is20','is30','is40')
});
})
</script>
<style type="text/css">
.is0{background:url(//freemuban.com/js/507/progressImg2.png) no-repeat 0 0;width:27px;height:30px;display:inline-block;}
.is10{background-position:-27px 0;}
.is20{background-position:-53px 0;}
.is30{background-position:-79px 0;}
.is40{background-position:-106px 0;}
</style>
</head>
<body>
<h1>passwordStrength密码强度指标</h1>
<form action="" method="post" id="autotab" class="p1">
<label>请输入密码：
<input type="password" name="password" />
<div id="passwordStrengthDiv" class="is0"></div>
</label>
</form>
</body>
</html>
