passwordStrength —jquery密码强度插件

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

 

原理说明：

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

 

使用教程：

创建如下html：

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

初始化插件：

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

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

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

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

转载于:https://www.cnblogs.com/kopheece/archive/2012/03/23/2414371.html