html - How can I use JavaScript to test for password strength in a way that returns the quality of the password in numeric form?

This is the challenge below:

Write an algorithm to check the validity of a password inputed by a user with the criteria below.

If these criteria at met, the user is returned a percentage value of how strong his/her password is:

●At least 1 letter between lowercase [ a - z ] -> 25%

●At least 1 letter between uppercase [ A - Z ] -> 25%

●At least 1 number between [ 0 - 9 ] -> 25%

●At least 1 character from [ $@#&! ] -> 25%

If these criteria are met, the user is sent a message according to condition met:

●Minimum length of password is 6 (display a message)

●Maximum length of password is 12

For Html:

<body>

  <form class="center-block">

<input type="text" id="password" autocomplete="off" class="form-control input-lg">

<progress max="100" value="0" id="meter"></progress>

<button class="btn btn-success btn-lg btn-block">Show Password Strength</button>

</form>

  <div class="textbox text-center"> password </div>
  
</body>

For JavaScript:

var code
=document.getElementById("password");

var strengthbar= document.getElementById("meter");

code.addEventListener("keyup", function(){checkpassword(code.value)

    })
 var display =document.getElementsByClassName("textbox")[0];
    function checkpassword(password)
    {
    var strength=0;
    if (password.match(/[a-z]+/)){
        strength+=1;
    }
    if (password.match(/[A-Z]+/)){
        strength+=1;
    }
    if (password.match(/[0-9]+/)){
        strength+=1;
    }
    if (password.match(/[$@#&!]+/)){
        strength+=1;

        }
    if (password.length<6){
    display.innerHTML="minimum number of characters is 6":
    }

    if (password.length>12){
            display.innerHTML="maximum number of characters is 12";
}
    switch(strength){
    case 0:
        strengthbar.value=0;
        break;

    case 1:
        strengthbar.value=25;
        break;

    case 2:
        strengthbar.value=50;
        break;

    case 3:
        strengthbar.value=75;
        break;

    case 4:
        strengthbar.value=100;
        break; }
}

Above is my own solution to the problem. It isn't giving me any errors but the JavaScript is not generating any results on my html.

Here is a link to the pen I'm using

This is the challenge below:

Write an algorithm to check the validity of a password inputed by a user with the criteria below.

If these criteria at met, the user is returned a percentage value of how strong his/her password is:

●At least 1 letter between lowercase [ a - z ] -> 25%

●At least 1 letter between uppercase [ A - Z ] -> 25%

●At least 1 number between [ 0 - 9 ] -> 25%

●At least 1 character from [ $@#&! ] -> 25%

If these criteria are met, the user is sent a message according to condition met:

●Minimum length of password is 6 (display a message)

●Maximum length of password is 12

For Html:

<body>

  <form class="center-block">

<input type="text" id="password" autocomplete="off" class="form-control input-lg">

<progress max="100" value="0" id="meter"></progress>

<button class="btn btn-success btn-lg btn-block">Show Password Strength</button>

</form>

  <div class="textbox text-center"> password </div>
  
</body>

For JavaScript:

var code
=document.getElementById("password");

var strengthbar= document.getElementById("meter");

code.addEventListener("keyup", function(){checkpassword(code.value)

    })
 var display =document.getElementsByClassName("textbox")[0];
    function checkpassword(password)
    {
    var strength=0;
    if (password.match(/[a-z]+/)){
        strength+=1;
    }
    if (password.match(/[A-Z]+/)){
        strength+=1;
    }
    if (password.match(/[0-9]+/)){
        strength+=1;
    }
    if (password.match(/[$@#&!]+/)){
        strength+=1;

        }
    if (password.length<6){
    display.innerHTML="minimum number of characters is 6":
    }

    if (password.length>12){
            display.innerHTML="maximum number of characters is 12";
}
    switch(strength){
    case 0:
        strengthbar.value=0;
        break;

    case 1:
        strengthbar.value=25;
        break;

    case 2:
        strengthbar.value=50;
        break;

    case 3:
        strengthbar.value=75;
        break;

    case 4:
        strengthbar.value=100;
        break; }
}

Above is my own solution to the problem. It isn't giving me any errors but the JavaScript is not generating any results on my html.

Here is a link to the pen I'm using

Share Improve this question edited May 27, 2018 at 1:10 asked May 26, 2018 at 22:32 Emmanuel Dan 1611 gold badge1 silver badge6 bronze badges

1 You've not yet explained a problem (no, not working is not a problem description until you clearly explain what not working means) or asked a specific question (no, why is my code not working is not a specific question). – Ken White Commented May 26, 2018 at 22:37
1 You should have errors as document.getElementByClassName("textbox"); is not a function. It's getElementsByClassName and should return an array like object. You also are not defining strengthbar anywhere in the code presented. – scrappedcola Commented May 26, 2018 at 22:45
1 Please don't do what? Ask you to improve your question? I wouldn't have to ask you to improve it if you posted it properly in the first place. How is it my fault you didn't? – Ken White Commented May 26, 2018 at 22:46
1 @KenWhite I'm sure you don't mean it, but you look a little bit too rude. Asking a close vote, and guiding users to the help page is enough. I remember having been worse when I came here first, I'm glad I did not met angry people. – Deblaton Jean-Philippe Commented May 26, 2018 at 22:52
2 @DeblatonJean-Philippe: Not being rude. I left a polite comment that asked the poster to improve the question, and got Please don't do that in response. I was by no means rude; I asked the poster to clarify what exactly it was they did not want me to do. Comments are designed precisely for asking the poster to clarify details. I also haven't posted anything on this question for more than half an hour now, until you caused me to do so. Thanks for your input, though. When using a comment exactly as intended for asking for clarification becomes being rude, SO is lost. – Ken White Commented May 26, 2018 at 23:26

| Show 11 more comments

1 Answer 1

Sorted by: Reset to default 18

You had several mistakes in your code (had because you fixed some by reading the comments). I'll list them again anyways:

Your switch statement was missing a curly bracket ({) at its beginning
Your function was missing a curly bracket ({) at its end
It's getElementsByClassName, not getElementByClassName. In addition to that, getElementsByClassName returns an array like HTMLCollection, so you need to select the first one like this: getElementsByClassName('textbox')[0] (mind the "[0]" here)
You don't call innerHTML like innerHTML("bla");, it's innerHTML = "bla";

You also should always use semicolons (;).

var code = document.getElementById("password");

var strengthbar = document.getElementById("meter");
var display = document.getElementsByClassName("textbox")[0];

code.addEventListener("keyup", function() {
  checkpassword(code.value);
});


function checkpassword(password) {
  var strength = 0;
  if (password.match(/[a-z]+/)) {
    strength += 1;
  }
  if (password.match(/[A-Z]+/)) {
    strength += 1;
  }
  if (password.match(/[0-9]+/)) {
    strength += 1;
  }
  if (password.match(/[$@#&!]+/)) {
    strength += 1;

  }

  if (password.length < 6) {
    display.innerHTML = "minimum number of characters is 6";
  }

  if (password.length > 12) {
    display.innerHTML = "maximum number of characters is 12";
  }

  switch (strength) {
    case 0:
      strengthbar.value = 0;
      break;

    case 1:
      strengthbar.value = 25;
      break;

    case 2:
      strengthbar.value = 50;
      break;

    case 3:
      strengthbar.value = 75;
      break;

    case 4:
      strengthbar.value = 100;
      break;
  }
}

<body>

  <form class="center-block">

    <input type="text" id="password" autocomplete="off" class="form-control input-lg">

    <progress max="100" value="0" id="meter"></progress>

    <button class="btn btn-success btn-lg btn-block">Show Password Strength</button>

  </form>

  <div class="textbox text-center"> password </div>

</body>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

html - How can I use JavaScript to test for password strength in a way that returns the quality of the password in numeric form?

1 Answer 1

与本文相关的文章

评论列表(0)