jQuery密码强度插件passwordStrength的实例演示

在jQuery诞生之前，JS已经有验证密码强度的实例了；现在有了jQuery，这个验证功能就显得更方便快捷了。首先简单说明一下其原理：其实原理非常的简单，这里赋予密码强度为10个等级（实例中的progressImg1.png是一张包含十个状态的图片），然后通过设置每 个状态的CSS样式来直观地显示当前密码的强度。其中，实现此功能的重点和难点就是通过正则进行判断等级（有兴趣的朋友可以慢慢探究，想方便直接使用的朋友了解一下即可）。



实例演示
下面简单阐述一下使用中注意的细节——

$(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;

})

});
上面的代码是首先定义插件，并指定密码输入框的ID。为了方便显示当前密码，这个实例中将密码输入框的属性值变为type="text"。当然，正式使用的时候可以调整过来。为了测试方便，这里增设了getRandomPassword方法来产生随机密 码的功能，其中参数代表密码的位数。

而在实际应用中，除了验证密码的强度之外，密码的长度限制也是必须的，所以为了更人性化一点，本例还增加了下面的提示——

function CheckPW(obj){

if(obj.val().length<6){

alert(’密码长度太短!’);

obj.select();

return false;

}

if(PW_Strength<8){

alert(’密码强度不够，建议重设！’);

obj.select();

return false;

}

}
当光标离开密码输入框的时候，如果不符合限制要求或者密码强度 不够时便会弹出提示对话框。这样完全是出于用户安全的角度来考虑，所以建议保留！