passwordStrength —jquery密码强度插件

请看实际demo：http://www.36ria.com/demo/password_strength/

 

原理说明：

其实原理非常的简单，这里赋予密码强度10个等级，请看progressImg1.png，是一张包含十个状态的图片。给密码框绑定keyup事件，获取密码值，然后使用正则进行判断等级（难点在这里），然后切换进度条的样式。

 

使用教程：

创建如下html：

<div class="form_item clearfix">
    <label>密&nbsp;&nbsp;码：</label>
    <div class="l">
       <div>
           <input type="password" name="password" class="text"/>
　　　　　　　　　　<a href="" class="Generate_password">产生随机密码</a>
　　　　　　　　　　<a href="" class="get_password">获取密码值</a></div>
        <div id="passwordStrengthDiv" class="is0"></div>        </div>
</div>

初始化插件：

$(document).ready(function(){
    var $pwd = $('input[name="password"]');                      
    $pwd.passwordStrength();
});

产生随机密码，同时触发验证：

$(".Generate_password").click(function(){   
        //产生随机八位密码
        var pwd = $.passwordStrength.getRandomPassword(8);
        //将随机密码写入密码框，并触发验证
        $pwd.val(pwd).trigger("keyup");
        return false;
    })

getRandomPassword方法会产生随机密码，接受一个参数，密码位数。