0

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

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Password Meter</title>
<script>
window.addEventListener('load', function() {
var password = document.getElementById("pwd");
  password.addEventListener('change', function() {

  // Reset if password length is zero
  if (password.length === 0) {
      document.getElementById("progresslabel").innerHTML = "";
      document.getElementById("progress").value = "0";
      return;
  }
  // Password requirements
  var match = new Array();
  match.push("[$@$!%*#?&]"); // Special Chars
  match.push("[A-Z]");      // Uppercase
  match.push("[0-9]");      // Numbers
  match.push("[a-z]");     // Lowercase

  // Check progress
  var prog = 0;
  for (var i = 0; i < match.length; i++) {
      if (new RegExp(match[i]).test(password)) {
          prog++;
      }
  }
    //Length must be at least 8 chars
  if(prog > 2 && password.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;

});
});
</script>
</head>
<body>
<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>
</body>
</html>

4

3 回答 3

4

几个问题：

  1. 您应该听keyup方法而不是change事件，以便在密码更改时重新评估强度（change仅在模糊时触发）
  2. password引用pwd元素，但您的代码将其视为输入值 - 我pwd在函数中添加了一个变量，它是password元素的值
  3. 字符测试可以简化 -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>

于 2018-12-29T03:56:27.727 回答
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>

于 2018-12-29T06:20:42.970 回答
0 

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 处理程序的正确方法。

于 2018-12-31T08:46:38.427 回答