WEB开发网
开发学院网页设计JavaScript JQuery实现密码强度验证 阅读

JQuery实现密码强度验证

 2010-03-05 00:00:00 来源:WEB开发网   
核心提示:密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,JQuery实现密码强度验证,只需要很少的代码便能实现,因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS

密码强度验证的方式有很多,今天给大家推荐一个通过JQuery实现的密码强度验证控件,只需要很少的代码便能实现。

JQuery实现密码强度验证  

JQuery实现密码强度验证 

JQuery实现密码强度验证

JQuery实现密码强度验证

因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS。JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js

这个控件的JS文件:password_strength_plugin.js

password_strength_plugin.js

(function($){ 
  $.fn.shortPass = 'Too short';
  $.fn.badPass = 'Weak';
  $.fn.goodPass = 'Good';
  $.fn.strongPass = 'Strong';
  $.fn.samePassword = 'Username and Password identical.';
  $.fn.resultStyle = "";
   $.fn.passStrength = function(options) { 
     var defaults = {
        shortPass:     "shortPass",  //optional
        badPass:    "badPass",    //optional
        goodPass:    "goodPass",    //optional
        strongPass:    "strongPass",  //optional
        baseStyle:    "testresult",  //optional
        userid:      "",        //required override
        messageloc:    1        //before == 0 or after == 1
      }; 
       var opts = $.extend(defaults, options); 
       return this.each(function() { 
         var obj = $(this);
         $(obj).unbind().keyup(function()
         {
          var results = $.fn.teststrength($(this).val(),$(opts.userid).val(),opts);
          if(opts.messageloc === 1)
          {
            $(this).next("." + opts.baseStyle).remove();
            $(this).after("<span class=\""+opts.baseStyle+"\"><span></span></span>");
            $(this).next("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results);
          }
          else
          {
            $(this).prev("." + opts.baseStyle).remove();
            $(this).before("<span class=\""+opts.baseStyle+"\"><span></span></span>");
            $(this).prev("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results);
          }
         });
         //FUNCTIONS
         $.fn.teststrength = function(password,username,option){
             var score = 0; 
             //password < 4
             if (password.length < 4 ) { this.resultStyle = option.shortPass;return $(this).shortPass; }
             //password == user name
             if (password.toLowerCase()==username.toLowerCase()){this.resultStyle = option.badPass;return $(this).samePassword;}
             //password length
             score += password.length * 4;
             score += ( $.fn.checkRepetition(1,password).length - password.length ) * 1;
             score += ( $.fn.checkRepetition(2,password).length - password.length ) * 1;
             score += ( $.fn.checkRepetition(3,password).length - password.length ) * 1;
             score += ( $.fn.checkRepetition(4,password).length - password.length ) * 1;
             //password has 3 numbers
             if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} 
             //password has 2 symbols
             if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;}
             //password has Upper and Lower chars
             if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){ score += 10;} 
             //password has number and chars
             if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ score += 15;} 
             //
             //password has number and symbol
             if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)){ score += 15;} 
             //password has char and symbol
             if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)){score += 15;}
             //password is just a numbers or chars
             if (password.match(/^\w+$/) || password.match(/^\d+$/) ){ score -= 10;}
             //verifying 0 < score < 100
             if ( score < 0 ){score = 0;} 
             if ( score > 100 ){ score = 100;} 
             if (score < 34 ){ this.resultStyle = option.badPass; return $(this).badPass;} 
             if (score < 68 ){ this.resultStyle = option.goodPass;return $(this).goodPass;}
            this.resultStyle= option.strongPass;
             return $(this).strongPass;
         };
     }); 
   }; 
})(jQuery); 

$.fn.checkRepetition = function(pLen,str) {
   var res = "";
   for (var i=0; i<str.length ; i++ ) 
   {
     var repeated=true;
     for (var j=0;j < pLen && (j+i+pLen) < str.length;j++){
       repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen));
       }
     if (j<pLen){repeated=false;}
     if (repeated) {
       i+=pLen-1;
       repeated=false;
     }
     else {
       res+=str.charAt(i);
     }
   }
   return res;
  };

1 2 3  下一页

Tags:JQuery 实现 密码

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接