admin管理员组

文章数量:1331909

I'm trying to create a simple password strength indicator with javascript by changing the value of the html5 progress element, but somethings wrong, can somebody point out the error here please? Console is showing zero errors and it must be something to do with change function not binding to the input with 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>

I'm trying to create a simple password strength indicator with javascript by changing the value of the html5 progress element, but somethings wrong, can somebody point out the error here please? Console is showing zero errors and it must be something to do with change function not binding to the input with 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>

Share edited Dec 29, 2018 at 3:40 Jack Bashford 44.1k11 gold badges55 silver badges82 bronze badges asked Dec 29, 2018 at 3:30 user3131345user3131345 631 silver badge6 bronze badges 1
  • What's wrong currently with your code? – Jack Bashford Commented Dec 29, 2018 at 3:42
Add a ment  | 

3 Answers 3

Reset to default 4

A few issues:

  1. You should listen to the keyup method instead of the change event so that the strength is re-evaluated whenever the password changes (change only fires on blur)
  2. password refers to pwd element but your code is treating it as the input value - I added a pwd variable in the function which is the password element's value
  3. The character tests can be simplified - the reduce I used is functionally equivalent to your code

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>

  

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./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" autoplete="off" placeholder="Enter Passwords">
    <div id="progressBar">
      <div id="progress-bar"></div>
    </div> 
  </div>  
 </form>  

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>

I think this is the right way to do it, using querySelector and keyup handler.

本文标签: htmlJavascriptSimple Password Strength IndicatorStack Overflow