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

  • 作者:不详
  • 来源:56gee
  • 更新时间:2012-06-25 22:57:53
  • 点击:5601
[100分]

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

jQuery插件 密码强度

实例演示

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

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

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

收藏内容
评分

特别说明:本站所有资源仅供学习与参考,请勿用于商业用途。若转载请注明来自56gee.com中的“来源”。

栏目精华