jQuery+passwordStrength密码强度检测

本文分享个检测密码强插件：passwordStrength。首先设定密码强度等级为10，制作一张图片表示每个等级状态，给密码框绑定keyup事件，通过keyup事件获取密码值，然后使用正则进行判断密码强度等级，然后变换相应的图片。

分类：表单代码 > 输入框难易：初级

查看演示下载资源下载积分： 20 积分

HTML

<p><label>请输入密码：</label><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>

CSS

.is0{background:url(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;}

jQuery

<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>