Question

我正在尝试通过更改html5 progress元素的值来使用javascript创建一个简单的密码强度指示器，但是出了点问题，请问有人可以在这里指出错误吗？控制台显示零错误，这一定与更改功能没有绑定到ID为'pwd'的输入有关吗？

Answer 1

一些问题：

您应该监听keyup方法而不是change事件，以便每当密码更改时都会重新评估强度（change仅在模糊时触发）
password引用了pwd元素，但是您的代码将其视为输入值-我在函数中添加了pwd变量，即password元素的值< / li>
可以简化字符测试-我使用的reduce在功能上等同于您的代码

var password = document.getElementById("pwd");
password.addEventListener('keyup', function() {

  var pwd = password.value

  // Reset if password length is zero
  if (pwd.length === 0) {
    document.getElementById("progresslabel").innerHTML = "";
    document.getElementById("progress").value = "0";
    return;
  }

  // Check progress
  var prog = [/[$@$!%*#?&]/, /[A-Z]/, /[0-9]/, /[a-z]/]
    .reduce((memo, test) => memo + test.test(pwd), 0);

  // Length must be at least 8 chars
  if(prog > 2 && pwd.length > 7){
    prog++;
  }

  // Display it
  var progress = "";
  var strength = "";
  switch (prog) {
    case 0:
    case 1:
    case 2:
      strength = "25%";
      progress = "25";
      break;
    case 3:
      strength = "50%";
      progress = "50";
      break;
    case 4:
      strength = "75%";
      progress = "75";
      break;
    case 5:
      strength = "100% - Password strength is good";
      progress = "100";
      break;
  }
  document.getElementById("progresslabel").innerHTML = strength;
  document.getElementById("progress").value = progress;

});

<form>
  <div>
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">
    <progress id="progress" value="0" max="100">70</progress>
    <span id="progresslabel"></span>
  </div>
</form>

Answer 2

  

jQuery.strength = function( element, password ) {
        var desc = [{'width':'0px'}, {'width':'20%'}, {'width':'40%'}, {'width':'60%'}, {'width':'80%'}, {'width':'100%'}];
        var descClass = ['', 'progress-bar-danger', 'progress-bar-danger', 'progress-bar-warning', 'progress-bar-success', 'progress-bar-success'];
        var score = 0;

        if(password.length > 6){
            score++;
        }

        if ((password.match(/[a-z]/)) && (password.match(/[A-Z]/))){
            score++;
        }

        if(password.match(/\d+/)){
            score++;
        }

        if(password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/)){
            score++;
        }

        if (password.length > 10){
            score++;
        }

        element.removeClass( descClass[score-1] ).addClass( descClass[score] ).css( desc[score] );
    };

jQuery(function() {
  jQuery("#pwd").keyup(function() {
                    jQuery.strength(jQuery("#progress-bar"), jQuery(this).val());
                });
});

 

   form {
      max-width: 400px;
      padding: 2em;
      border:1px dashed #ddd
        
    }
    #pwd{
      border-radius:50px;
      padding: 10px 20px;
      border:2px solid #999;
    }
    *:focus {
      outline-style: none;
    }

    input {
      display: block;
      width: 100%;
      box-sizing: border-box;
      padding: 6px;
      border: 1px solid #ddd;
    }

    #progressBar {
      height: 20px;
      width: 100%;
      margin-top: 0.6em;
      border-radius:50px;
      border:2px solid #ddd
    }

    #progress-bar {
      width: 0%;
      height: 100%;
      transition: width 500ms linear;
      border-radius:50px;
      box-shadow:0px 1px 5px #555
    }

    .progress-bar-danger {
      background: #d00;
    }

    .progress-bar-warning {
      background: #f50;
    }

    .progress-bar-success {
      background: #080;
    }

   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
 <h3> Password Strength Using JAVASCRIPT.</h3>
 <form name="passwordStrengthBox">
   <div class="passBox">
    <input type="text" id="pwd" autocomplete="off" placeholder="Enter Passwords">
    <div id="progressBar">
      <div id="progress-bar"></div>
    </div> 
  </div>  
 </form>

Answer 3

var password = document.querySelector('#pwd');

password.onkeyup = function (event) {
  handleChange(password)
}

function handleChange(password) {
  var pwd = password.value

  var progresslabel = document.querySelector('#progresslabel')
  var progress = 0;
  var strength = '0';

  switch (pwd.length) {
    case 1:
      strength = '12.5%';
      progress = 12;
      break;
    case 2:
      strength = '25%';
      progress = 25;
      break;
    case 3:
      strength = '37.5%';
      progress = 37.5;
      break;
    case 4:
      strength = '50%';
      progress = 50;
      break;
    case 5:
      strength = '62.5%';
      progress = 62.5;
      break;
    case 6:
      strength = '75%';
      progress = 75;
      break;
    case 7:
      strength = '87.5%';
      progress = 87.5;
      break;
    case 8:
      strength = '100% - Password strength is good';
      progress = 100;
      break;
  }

  // Number, a CAPS, lowercaps and special character.
  let regexp = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-])/;
  if (regexp.test(pwd)) {
    // Display it
    progresslabel.innerHTML = strength;
    document.getElementById("progress").value = progress;
  } else {
    progresslabel.innerHTML = '1 Cap, 1 digit, 8 digits atleast.'
  }
}

<form>   
  <div> 
    <label for="pwd">Password:</label>
    <input type="text" id="pwd">     
    <progress id="progress" value="0" max="100">70</progress>     
    <span id="progresslabel"></span>   
  </div> 
</form>

我认为使用querySelector和keyup处理程序是正确的方法。

Javascript-简单的密码强度指示器

3 个答案: