I would like to add a password strength meter to the change password form. I would like to understand how this is possible with javascript and how I can set if the password must contain at least a minimum of characters made up of uppercase, lowercase, numbers etc.

Can anyone help me understand how to do it or if there are any references? I am quite new to this and am trying to learn. I appreciate any help, thanks.

/* Show Hide Password */    
function showPassword(targetID) {
    var pw = document.getElementById(targetID);
    if (pw.type === "password") {
      pw.type = "text";
    } else {
      pw.type = "password";
    }
  }

fieldset { 
  border: 0!important; margin: 0!important; padding: 5px!important; 
}

/*Input fields*/
input.field-settings {
    width: 100%;
  border-radius: 4px!important;
  border: 2px solid #efefef!important;
  padding: 12px!important;
    margin-bottom: 6px;
  height: 40px;
}

input.field-settings:focus {
  border: 2px solid #6FA4F2!important;
}

input.field-settings.disabled {
    background: var(--e-global-color-2606bfd);
    color: var(--e-global-color-43596cc);
}

label.t2 {
    font-size: 14px!important;
    line-height: 1.5em!important;
    font-weight: 500!important;
    margin-bottom: 6px!important;
    display: block;
}

span.t4-light {
    margin: 0 6px;
    display: block;
    font-style: italic;
}

/*Toggle Password*/
.togglePw { display: none; margin-bottom: 0;}

.togglePw   label:before { 
    content: "\f06e"; 
    font: var(--fa-font-solid); 
    margin-bottom: 6px; 
    margin-left: -30px; 
    display: block;
    color: #8C9099;
}

.togglePw:checked   label:before { 
    content: "\f070"; 
    font: var(--fa-font-solid);
    margin-bottom: 6px; 
    margin-left: -30px; 
    display: block;
    color: #1E70EB;
}

.input-group { display: flex; align-items: center; }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous"/>

<fieldset>  
<p >
  <label  for="password_current">Enter the current password (leave blank to not change)</label>
  <div >
   <input type="password"  name="password" id="password_current" autocomplete="off"/>
   <input type="checkbox"  id="pw_current" onclick="showPassword('password_current')"/>
   <label for="pw_current" ></label>
  </div>
</p>

<p >
  <label  for="password_1">Enter your new password</label>
  <div >
   <input type="password"  name="password_1" id="password_1" autocomplete="off" />
   <input type="checkbox"  id="pw_1" onclick="showPassword('password_1')"/>
   <label for="pw_1" ></label>
  </div>
</p>

<p >
  <label  for="password_2">Repeat your new password</label>
  <div >
   <input type="password"  name="password_2" id="password_2" autocomplete="off" />
   <input type="checkbox"  id="pw_2" onclick="showPassword('password_2')"/>
   <label for="pw_2" ></label>
  </div>
</p>
</fieldset>

CodePudding user response：

you need to add button below this from and add functionality on click event listener you could check length of string, at least one upperCase and special char. if your condition gone false. you could render error message by using Alert or Toast message also.

Note: for ready-cooked functions are available at google. one of link for your reference are below.

password_validator

Happy coding

CodePudding user response：

Visit this link I hope it would help you

http://jsfiddle.net/9SUWP/

<form namRune="Login" method="post" action="">
    <fieldset>
        <legend>Password Strength</legend>        
        <input type="password" name="pass" id="pass">
        <span id="passstrength"></span>
    </fieldset>
</form>       

$(document).ready(function() {

    $('#pass').keyup(function(e) {
        var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
        var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
        var enoughRegex = new RegExp("(?=.{6,}).*", "g");
        if (false === enoughRegex.test($(this).val())) {
            $('#passstrength').html('More Characters');
        } else if (strongRegex.test($(this).val())) {
            $('#passstrength').className = 'ok';
            $('#passstrength').html('Strong!');
        } else if (mediumRegex.test($(this).val())) {
            $('#passstrength').className = 'alert';
            $('#passstrength').html('Medium!');
        } else {
            $('#passstrength').className = 'error';
            $('#passstrength').html('Weak!');
        }
        return true;
    });

});