【问题标题】:jQuery password strength checkerjQuery密码强度检查器
【发布时间】:2010-11-26 04:38:34
【问题描述】:

我是 jQuery 的新手,我编写了一个简单的函数来检查每次按键的密码强度。

这个想法是,每次用户输入一个字符时,都会评估内容以测试他们输入的密码的强度......我相信每个人都以前见过这些。

无论如何,我使用的逻辑是没有密码以值 1 开头。当使用小写字符时,分数增加到 2。当使用数字时,分数再次增加 1,同样当使用大写字符并且密码长度为 5 个或更多字符时。

每次按下一个键时,返回的都是密码强度,从 1 到 5 的值。

那么,关于我的问题。我完成它的方式似乎不像 jQuery 那样......几乎就像我可能刚刚完成了直接的 javascript。我也想知道我的逻辑。我做了什么或忽略了什么?比我更聪明的人有什么建议吗?

任何建议或意见将不胜感激。

$(document).ready(function(){

        $("#pass_strength").keyup(function() {

            var strength = 1;

            /*length 5 characters or more*/
            if(this.value.length >= 5) {
                strength++;
            }

            /*contains lowercase characters*/
            if(this.value.match(/[a-z]+/)) {
                strength++;
            }

            /*contains digits*/
            if(this.value.match(/[0-9]+/)) {
                strength++;
            }

            /*contains uppercase characters*/
            if(this.value.match(/[A-Z]+/)) {
                strength++;
            }

            alert(strength);
        });
     });

【问题讨论】:

标签: javascript jquery passwords logic


【解决方案1】:

最好的方法是按照 TJB 的建议使用现有的插件。

关于代码本身的问题,一个更好的方法是这样写:

var pass = "f00Bar!";

var strength = 1;
var arr = [/.{5,}/, /[a-z]+/, /[0-9]+/, /[A-Z]+/];
jQuery.map(arr, function(regexp) {
  if(pass.match(regexp))
     strength++;
});

(已修改以纠正语法错误。)

【讨论】:

  • 你能解释一下这是做什么的吗:/{5\,}/
  • 应该是/.{5,}/。逗号表示“没有上限”。如果没有逗号,它将尝试精确匹配 5 个字符。
【解决方案2】:

我建议评估现有的 jQuery 密码强度插件。 (除非您只是将其作为练习)

以下是我找到的一些链接:

http://www.visual-blast.com/javascript/password-strength-checker/

http://phiras.wordpress.com/2007/04/08/password-strength-meter-a-jquery-plugin/

【讨论】:

    【解决方案3】:

    在 gs 的回答之上,您应该根据常用的字典单词检查密码(可能使用哈希)。否则,像“Yellow1”这样的弱密码将被您的逻辑评估为强密码。

    【讨论】:

      【解决方案4】:

      如果你正在做excersie

      参考:Password Strength Indicator

      使用的 jQuery 代码(# 表示与 Benjamin 的代码不同的地方)

      $.fn.passwordStrength = function( options ){
      return this.each(function(){
          var that = this;that.opts = {};
          that.opts = $.extend({}, $.fn.passwordStrength.defaults, options);
      
          that.div = $(that.opts.targetDiv);
          that.defaultClass = that.div.attr('class');
      
          that.percents = (that.opts.classes.length) ? 100 / that.opts.classes.length : 100;
      
          v = $(this)
          .keyup(function(){
              if( typeof el == "undefined" )
              this.el = $(this);
              var s = getPasswordStrength (this.value);
              var p = this.percents;
              var t = Math.floor( s / p );
      
              if( 100 <= s )
              t = this.opts.classes.length - 1;
      
              this.div
              .removeAttr('class')
              .addClass( this.defaultClass )
              .addClass( this.opts.classes[ t ] );
          })
          # Removed generate password button creation
      });
      
      function getPasswordStrength(H){
          var D=(H.length);
      
          # Added below to make all passwords less than 4 characters show as weak
          if (D<4) { D=0 }
      
      
          if(D>5){
              D=5
          }
          var F=H.replace(/[0-9]/g,"");
          var G=(H.length-F.length);
          if(G>3){G=3}
          var A=H.replace(/\W/g,"");
          var C=(H.length-A.length);
          if(C>3){C=3}
          var B=H.replace(/[A-Z]/g,"");
          var I=(H.length-B.length);
          if(I>3){I=3}
          var E=((D*10)-20)+(G*10)+(C*15)+(I*10);
          if(E<0){E=0}
          if(E>100){E=100}
          return E
      }
      
      
      # Removed generate password function
      };
      
      $(document)
      .ready(function(){
      $('input[name="password2"]').passwordStrength({targetDiv: '#iSM',classes : Array('weak','medium','strong')});
      
      });
      

      【讨论】:

        【解决方案5】:

        如果你不想使用 jQuery,你可以使用这样的东西:

        function strengthResult(p) {
        if(p.length<6 || p.length>18) {
        return 'Passwords must be 6-18 characters';
        }
        var strength = checkStrength(p);
        switch(true) {
            case strength<=30:
                return 'Password "'+p+'" ('+strength+') is Very Weak';
                break;
            case strength>30 && strength<=35:
                return 'Password "'+p+'" ('+strength+') is Weak';
                break;
            case strength>35 && strength<=50:
                return 'Password "'+p+'" ('+strength+') is below Average';
                break;        
            case strength>50 && strength<=60:
                return 'Password "'+p+'" ('+strength+') is almost Good';
                break;
            case strength>60 && strength<=70:
                return 'Password "'+p+'" ('+strength+') is Good';
                break;
            case strength>70 && strength<=80:
                return 'Password "'+p+'" ('+strength+') is Very Good';
                break;
            case strength>80 && strength<=90:
                return 'Password "'+p+'" ('+strength+') is Strong';
                break;
            case strength>90 && strength<=100:
                return 'Password "'+p+'" ('+strength+') is Very Strong';
                break;
                default:
        				return 'Error';
        }
        }
        function strengthMap(w,arr) {
        var c = 0;
        var sum = 0;
        newArray = arr.map(function(i) {
        i = c;
        //sum += w-2*i;
        sum += w;
        c++;
        return sum;
        });
        return newArray[c-1];
        }
        function checkStrength(p){
        var weight;
        var extra;
        switch(true) {
            case p.length<6:
                return false;
                break;
            case p.length>18:
                return false;
                break;
            case p.length>=6 && p.length<=10:
            		weight = 7;
                extra = 4;
                break;
            case p.length>10 && p.length<=14:
            		weight = 6;
                extra = 3;
                break;
            case p.length>14 && p.length<=18:
            		weight = 5;
                extra = 2.5;
                break;
        }
        allDigits = p.replace( /\D+/g, '');
        allLower = p.replace( /[^a-z]/g, '' );
        allUpper = p.replace( /[^A-Z]/g, '' );
        allSpecial = p.replace( /[^\W]/g, '' );
        if(allDigits && typeof allDigits!=='undefined') {
        dgtArray = Array.from(new Set(allDigits.split('')));
        dgtStrength = strengthMap(weight,dgtArray);
        } else {
        dgtStrength = 0;
        }
        if(allLower && typeof allLower!=='undefined') {
        lowArray = Array.from(new Set(allLower.split('')));
        lowStrength = strengthMap(weight,lowArray);
        } else {
        lowStrength = 0;
        }
        if(allUpper && typeof allUpper!=='undefined') {
        upArray = Array.from(new Set(allUpper.split('')));
        upStrength = strengthMap(weight,upArray);
        } else {
        upStrength = 0;
        }
        if(allSpecial && typeof allSpecial!=='undefined') {
        splArray = Array.from(new Set(allSpecial.split('')));
        splStrength = strengthMap(weight,splArray);
        } else {
        splStrength = 0;
        }
        strength = dgtStrength+lowStrength+upStrength+splStrength;
        if(dgtArray.length>0){
        strength = strength + extra;
        }
        if(splStrength.length>0){
        strength = strength + extra;
        }
        if(p.length>=6){
        strength = strength + extra;
        }
        if(lowArray.length>0 && upArray.length>0){
        strength = strength + extra;
        }
        return strength;
        }
        console.log(strengthResult('5@aKw1'));
        console.log(strengthResult('5@aKw13'));
        console.log(strengthResult('5@aKw13e'));
        console.log(strengthResult('5@aKw13eE'));
        console.log(strengthResult('5@aKw13eE!'));
        console.log(strengthResult('5@aKw13eE!,'));
        console.log(strengthResult('5@aKw13eE!,4'));
        console.log(strengthResult('5@aKw13eE!,4D'));
        console.log(strengthResult('5@aKw13eE!,4Dq'));
        console.log(strengthResult('5@aKw13eE!,4DqJ'));
        console.log(strengthResult('5@aKw13eE!,4DqJi'));
        console.log(strengthResult('5@aKw13eE!,4DqJi#'));
        console.log(strengthResult('5@aKw13eE!,4DqJi#7'));
        console.log(strengthResult('5@aKw13eE!,4DqJJ#7'));
        console.log(strengthResult('5@aKw33eE!,4DqJJ#7'));
        
        console.log(strengthResult('111111'));
        console.log(strengthResult('1111111'));
        console.log(strengthResult('11111111'));
        console.log(strengthResult('111111111'));
        console.log(strengthResult('1111111111'));
        console.log(strengthResult('11111111111'));
        console.log(strengthResult('111111111111'));
        console.log(strengthResult('1111111111111'));
        console.log(strengthResult('11111111111111'));
        console.log(strengthResult('111111111111111'));
        console.log(strengthResult('1111111111111111'));
        console.log(strengthResult('11111111111111111'));
        console.log(strengthResult('111111111111111111'));
        
        console.log(strengthResult('5@aKw33eE!,4DqJJ#71'));
        console.log(strengthResult('11111'));

        上面的 sn-p 将计算 6 到 18 个字符长度的密码的密码强度。每个唯一字符的默认值为

        • 7分如果密码6-10个字符
        • 6分如果密码10-14个字符
        • 5分如果密码14-18个字符

        如果一个字符在密码中重复,那么它每重复一次就会失去 2 分。

        满足以下规格时给予加分:

        • 密码至少有 6 位数字(加 2.5 或 3 或 4 分)
        • 密码至少有 1 个数字(加 2.5 或 3 或 4 分)
        • 密码至少有 1 个特殊字符(加 2.5 或 3 或 4 分)
        • 密码至少有 1 个大写和 1 个小写字符(加 2.5 或 3 或 4 分)

        【讨论】:

          【解决方案6】:
          • 密码长度至少应为 8 个字符。
          • 强度随着长度的增加而增加,较长的密码应该有更多的分数。
          • 包括特殊字符,如 #/" 等。(或 [a-Z0-9] 以外的任何字符)
          • 对于非常长的密码,此方法可能会变慢。您为什么不测试每个新字符并使用密码已经具有的功能的字典。

          【讨论】:

            【解决方案7】:

            您可以尝试使用 jQuery 插件进行密码强度检查

            其中一些是

            Password Strength Meter

            Password Strength Indicator

            【讨论】:

              【解决方案8】:

              function strengthResult(p) {
              if(p.length<6 || p.length>18) {
              return 'Passwords must be 6-18 characters';
              }
              var strength = checkStrength(p);
              switch(true) {
                  case strength<=30:
                      return 'Password "'+p+'" ('+strength+') is Very Weak';
                      break;
                  case strength>30 && strength<=35:
                      return 'Password "'+p+'" ('+strength+') is Weak';
                      break;
                  case strength>35 && strength<=50:
                      return 'Password "'+p+'" ('+strength+') is below Average';
                      break;        
                  case strength>50 && strength<=60:
                      return 'Password "'+p+'" ('+strength+') is almost Good';
                      break;
                  case strength>60 && strength<=70:
                      return 'Password "'+p+'" ('+strength+') is Good';
                      break;
                  case strength>70 && strength<=80:
                      return 'Password "'+p+'" ('+strength+') is Very Good';
                      break;
                  case strength>80 && strength<=90:
                      return 'Password "'+p+'" ('+strength+') is Strong';
                      break;
                  case strength>90 && strength<=100:
                      return 'Password "'+p+'" ('+strength+') is Very Strong';
                      break;
                      default:
              				return 'Error';
              }
              }
              function strengthMap(w,arr) {
              var c = 0;
              var sum = 0;
              newArray = arr.map(function(i) {
              i = c;
              //sum += w-2*i;
              sum += w;
              c++;
              return sum;
              });
              return newArray[c-1];
              }
              function checkStrength(p){
              var weight;
              var extra;
              switch(true) {
                  case p.length<6:
                      return false;
                      break;
                  case p.length>18:
                      return false;
                      break;
                  case p.length>=6 && p.length<=10:
                  		weight = 7;
                      extra = 4;
                      break;
                  case p.length>10 && p.length<=14:
                  		weight = 6;
                      extra = 3;
                      break;
                  case p.length>14 && p.length<=18:
                  		weight = 5;
                      extra = 2.5;
                      break;
              }
              allDigits = p.replace( /\D+/g, '');
              allLower = p.replace( /[^a-z]/g, '' );
              allUpper = p.replace( /[^A-Z]/g, '' );
              allSpecial = p.replace( /[^\W]/g, '' );
              if(allDigits && typeof allDigits!=='undefined') {
              dgtArray = Array.from(new Set(allDigits.split('')));
              dgtStrength = strengthMap(weight,dgtArray);
              } else {
              dgtStrength = 0;
              }
              if(allLower && typeof allLower!=='undefined') {
              lowArray = Array.from(new Set(allLower.split('')));
              lowStrength = strengthMap(weight,lowArray);
              } else {
              lowStrength = 0;
              }
              if(allUpper && typeof allUpper!=='undefined') {
              upArray = Array.from(new Set(allUpper.split('')));
              upStrength = strengthMap(weight,upArray);
              } else {
              upStrength = 0;
              }
              if(allSpecial && typeof allSpecial!=='undefined') {
              splArray = Array.from(new Set(allSpecial.split('')));
              splStrength = strengthMap(weight,splArray);
              } else {
              splStrength = 0;
              }
              strength = dgtStrength+lowStrength+upStrength+splStrength;
              if(dgtArray.length>0){
              strength = strength + extra;
              }
              if(splStrength.length>0){
              strength = strength + extra;
              }
              if(p.length>=6){
              strength = strength + extra;
              }
              if(lowArray.length>0 && upArray.length>0){
              strength = strength + extra;
              }
              return strength;
              }
              console.log(strengthResult('5@aKw1'));
              console.log(strengthResult('5@aKw13'));
              console.log(strengthResult('5@aKw13e'));
              console.log(strengthResult('5@aKw13eE'));
              console.log(strengthResult('5@aKw13eE!'));
              console.log(strengthResult('5@aKw13eE!,'));
              console.log(strengthResult('5@aKw13eE!,4'));
              console.log(strengthResult('5@aKw13eE!,4D'));
              console.log(strengthResult('5@aKw13eE!,4Dq'));
              console.log(strengthResult('5@aKw13eE!,4DqJ'));
              console.log(strengthResult('5@aKw13eE!,4DqJi'));
              console.log(strengthResult('5@aKw13eE!,4DqJi#'));
              console.log(strengthResult('5@aKw13eE!,4DqJi#7'));
              console.log(strengthResult('5@aKw13eE!,4DqJJ#7'));
              console.log(strengthResult('5@aKw33eE!,4DqJJ#7'));
              
              console.log(strengthResult('111111'));
              console.log(strengthResult('1111111'));
              console.log(strengthResult('11111111'));
              console.log(strengthResult('111111111'));
              console.log(strengthResult('1111111111'));
              console.log(strengthResult('11111111111'));
              console.log(strengthResult('111111111111'));
              console.log(strengthResult('1111111111111'));
              console.log(strengthResult('11111111111111'));
              console.log(strengthResult('111111111111111'));
              console.log(strengthResult('1111111111111111'));
              console.log(strengthResult('11111111111111111'));
              console.log(strengthResult('111111111111111111'));
              
              console.log(strengthResult('5@aKw33eE!,4DqJJ#71'));
              console.log(strengthResult('11111'));

              【讨论】:

              • 最好在你的代码中给出一个简短的解释。
              • 除非您有非常具体的内容要添加,否则我不建议您添加 9 岁问题的答案
              • 请注意,这与两年前有人在没有解释的情况下发布的公认答案完全相同。
              • 不错!我的评分函数使用了非常相似的方法 - 变化、混乱和长度的奖励:codepen.io/oriadam/pen/ExmaoYy 尝试了相同的设置,结果相似。只是我给1111111111111111(31)打了太多分
              【解决方案9】:

              试试这个代码来检查文本框的密码

              <script>
              $(document).ready(function()
              {
              $('#pwd').keyup(function()
              {
              $('#strength_message').html(checkStrength($('#pwd').val()))
              }) 
              function checkStrength(password)
              {
              var strength = 0
              if (password.length < 6) { 
              $('#strength_message').removeClass()
              $('#strength_message').addClass('short')
              return 'Too short' 
              }
              
              if (password.length > 7) strength += 1
              if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/))  strength += 1
              if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/))  strength += 1 
              if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/))  strength += 1
              if (password.match(/(.*[!,%,&,@,#,$,^,*,?,_,~].*[!,%,&,@,#,$,^,*,?,_,~])/)) strength += 1
              if (strength < 2 )
              {
              $('#strength_message').removeClass()
              $('#strength_message').addClass('weak')
              return 'Weak'   
              }
              else if (strength == 2 )
              {
              $('#strength_message').removeClass()
              $('#strength_message').addClass('good')
              return 'Good'  
              }
              else
              {
              $('#strength_message').removeClass()
              $('#strength_message').addClass('strong')
              return 'Strong'
              }
              }
              });
              </script>
              

              HTML:

                 <center><form id="password-strength">
                  <label>Password : </label>
                  <input name="pwd" id="pwd" type="password"/>
                  <span id="strength_message"></span>
                  </form><br/>
              

              【讨论】:

                【解决方案10】:

                下面是一个免费的密码强度/策略 JQuery 插件验证器。它还支持验证以多种语言输入的密码(支持 Unicode)。它是多语言的。

                Password Policy/Strength JQuery plug-in Validator

                【讨论】:

                  【解决方案11】:

                  应根据几个参数检查密码的强度,例如是否存在特殊字符和数字、密码的长度等。

                  我发现下面的教程有很好的演示:

                  http://tinytute.com/2014/06/03/animated-password-strength-checker-quick-easy/

                  jQuery 代码块:

                  $(document).ready(function(){
                  
                      $("#textBox").keyup(function(){
                  
                          var passWord = $("#textBox").val();
                          var passLength = passWord.length;
                          var specialFlag = 0;
                          var numberFlag = 0;
                          var numberGenerator = 0;
                          var total = 0;
                  
                          if(/^[a-zA-Z0-9- ]*$/.test(passWord) == false) {
                  
                              specialFlag =20;
                          }
                  
                  
                          if(passWord.match(/[0-9]/)) {
                  
                              numberFlag = 25;
                          }
                  
                          if(passLength>4&&passLength<=6){
                              numberGenerator =25;
                          }else if(passLength>=7&&passLength<=9){
                              numberGenerator =35;
                          }else if(passLength>9){
                              numberGenerator =55;
                          }else if(passLength>0&&passLength<=4){
                              numberGenerator =15;
                          }else{
                              numberGenerator =0;
                          }
                  
                          total = numberGenerator + specialFlag + numberFlag;
                          if(total<30){
                              $('#progressBar').css('background-color','#CCC');
                          }else if(total<60&&total>=30){
                  
                              $('#progressBar').css('background-color','#FF6600');
                  
                          }else if(total>=60&&total<90){
                  
                              $('#progressBar').css('background-color','#FFCC00');
                  
                          }else if(total>=90){
                  
                              $('#progressBar').css('background-color','#0f0');
                  
                          }
                          $('#progressBar').css('width',total+'%');
                  
                      });
                  
                  });
                  

                  希望这组逻辑能解决问题

                  【讨论】:

                    【解决方案12】:

                    最好的办法是这样

                    function password_validate(txt) {
                      var val1 = 0;
                      var val2 = 0;
                      var val3 = 0;
                      var val4 = 0;
                      var val5 = 0;
                      var counter, color, result;
                      var flag = false;
                      if (txt.value.length <= 0) {
                        counter = 0;
                        color = "transparent";
                        result = "";
                      }
                      if (txt.value.length < 8 & txt.value.length > 0) {
                        counter = 20;
                        color = "red";
                        result = "Short";
                      } else {
                        document.getElementById(txt.id + "error").innerHTML = " ";
                        txt.style.borderColor = "grey";
                        var regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,15}$/;
                        //  document.getElementById("pass_veri").style.display="block";
                        var fletter = /[a-z]/;
                        if (fletter.test(txt.value)) {
                          val1 = 20;
                    
                        } else {
                          val1 = 0;
                        }
                        //macth special character
                        var special_char = /[-!$%^&*()_+|~=`{}\[\]:";'<>?,.\/]/;
                        if (special_char.test(txt.value)) {
                          val2 = 30;
                        } else {
                          val = 0;
                        }
                        /*capital_letter*/
                        var cap_lett = /[A-Z]/;
                        if (cap_lett.test(txt.value)) {
                          val3 = 20;
                        } else {
                          val = 0;
                        }
                        /*one numeric*/
                        var num = /[0-9]/;
                        if (num.test(txt.value)) {
                          val4 = 20;
                        } else {
                          val4 = 0;
                        }
                        /* 8-15 character*/
                        var range = /^.{8,50}$/;
                        if (range.test(txt.value)) {
                          val5 = 10;
                        } else {
                          val5 = 0;
                        }
                        counter = val1 + val2 + val3 + val4 + val5;
                    
                        if (counter >= 30) {
                          color = "skyblue";
                          result = "Fair";
                        }
                        if (counter >= 50) {
                          color = "gold";
                          result = "Good";
                        }
                        if (counter >= 80) {
                          color = "green";
                          result = "Strong";
                        }
                        if (counter >= 90) {
                          color = "green";
                          result = "Very Strong";
                        }
                      }
                      document.getElementById("prog").style.width = counter + "%";
                      document.getElementById("prog").style.backgroundColor = color;
                      document.getElementById("result").innerHTML = result;
                      document.getElementById("result").style.color = color;
                    }
                    body {
                      font-family: 'Rajdhani', sans-serif;
                      background-color: #E4E4E4;
                    }
                    
                    
                    /* tooltip*/
                    
                    .hint {
                      width: 258px;
                      background: red;
                      position: relative;
                      -moz-border-radius: 10px;
                      -webkit-border-radius: 10px;
                      border-radius: 10px;
                      position: absolute;
                      left: 0px;
                      border: 1px solid #CC9933;
                      background-color: #FFFFCC;
                      display: none;
                      padding: 20px;
                      font-size: 11px;
                    }
                    
                    .hint:before {
                      content: "";
                      position: absolute;
                      left: 100%;
                      top: 24px;
                      width: 0;
                      height: 0;
                      border-top: 17px solid transparent;
                      border-bottom: 1px solid transparent;
                      border-left: 22px solid #CC9933;
                    }
                    
                    .hint:after {
                      content: "";
                      position: absolute;
                      left: 100%;
                      top: 26px;
                      width: 0;
                      height: 0;
                      border-top: 14px solid transparent;
                      border-bottom: 1px solid transparent;
                      border-left: 20px solid #FFFFCC;
                    }
                    
                    .parent {
                      position: relative;
                    }
                    
                    .progress {
                      height: 7px;
                    }
                    
                    #progres {
                      display: block;
                    }
                    
                    p {
                      margin: 0px;
                      font-weight: normal;
                    }
                    
                    .form-control {
                      width: none;
                      margin-left: 260px;
                      margin-top: 25px;
                      width: 200px;
                    }
                    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
                    <div class="form-group col-lg-12 parent ">
                      <label class="hint" id="pass-hint">
                        Password Strength:<span id="result"></span>
                        <br>
                        <div class="progress" id="progres">
                          <div class="progress-bar progress-bar-danger" role="progressbar" id="prog">
                          </div>
                        </div>
                        <p> passowrd must have atleast 8 charatcer</p>
                      </label>
                      <input type="password" class="form-control" data-toggle="tooltip" data-placement="left" id="pass" onfocus="document.getElementById('pass-hint').style.display='block'" onblur="document.getElementById('pass-hint').style.display='none'" placeholder="**********"
                        oninput="password_validate(this);document.getElementById('progres').style.display='block';">
                      <i class=" form-control-feedback" id="passsuccess" aria-hidden="true"></i>
                      <span id="passerror" class="help-block error"></span>
                    </div>

                    【讨论】:

                      【解决方案13】:

                      在下面找到完整的代码:

                      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
                      <script type="text/javascript" src="jquery.complexify.min.js"></script>
                      

                      HTML:

                      <div class="row">
                      <div class="col-md-4 col-md-offset-4">
                      <h4> Password strength check with jquery</h4>
                      <label>Enter Storng Password: </label>
                      <input type="password" id="pwd"><br/>
                      <progress style="margin-left:20%" value="0" max="100" id="pg"></progress> <span id="cpx">0%</span>
                      </div>
                      

                      脚本

                      $(function(){
                      $("#pwd").complexify({}, function(valid, complexity){
                      //console.log("Password complexity: " + Math.round(complexity));
                      $("#pg").val(Math.round(complexity));
                      $("#cpx").html(Math.round(complexity)+'%');
                      });
                      });
                      

                      请完成工作源代码here

                      【讨论】:

                        【解决方案14】:

                        我发现了一个很好的密码验证插件设计。让我解释一下步骤

                        这里是完整代码:https://lets-solve.com/jquery-password-validator/

                        1. 创建 HTML 文件并放置密码并确认密码字段。

                        1. 加载css

                        2. 加载 javascript

                        1. 初始化插件

                          var password_validator = new PasswordValidator();

                        就是这样,如果两个密码不匹配,现在密码匹配器将显示错误消息。

                        如何在提交表单/点击按钮时比较和验证密码?

                        var password_validator = new PasswordValidator();
                        

                        // 检查密码条件是否匹配,如果是则返回true,否则返回false var is_valid = password_validator.is_valid();

                        // 检查两个密码是否匹配 var is_match = password_validator.match_confirm_password();

                        【讨论】:

                          【解决方案15】:

                          实现基于变化、混乱和长度的评分:

                          function scorePass(pass) {  
                              let score = 0;
                              
                              // variation range
                              score += new Set(pass.split("")).size * 1;
                              const charCodes = [...new Set(pass.split(''))].map(x=>x.toLowerCase().charCodeAt(0));
                          
                              // shuffle score - bonus for messing things up
                              for (let i=1; i < charCodes.length;i++)
                              {
                                  const dist = Math.abs(charCodes[i-1]-charCodes[i]);
                                  if (dist>60)
                                      score += 15;
                                  else if (dist>8)
                                      score += 10;
                                  else if (dist>1)
                                      score += 2;
                              }
                              
                              // bonus for length
                              score += (pass.length - 6) * 3;
                          
                              return parseInt(score);
                          }
                          

                          abcעfדg94a > jefPYM583^ > abcABC!@#$

                          https://codepen.io/oriadam/pen/ExmaoYy

                          【讨论】:

                            猜你喜欢
                            • 2021-07-13
                            • 1970-01-01
                            • 1970-01-01
                            • 1970-01-01
                            • 2016-12-04
                            • 1970-01-01
                            • 2014-10-26
                            • 2012-06-16
                            • 1970-01-01
                            相关资源
                            最近更新 更多