如何使用JavaScript添加密码强度计到输入字段？

Question

我想在更改密码表中添加密码强度表。我想了解JavaScript如何进行这种可能的方法，以及如果密码必须至少包含由大写，小写，数字等组成的字符，那么我该

如何设置有参考吗？我对此很陌生，并且正在尝试学习。感谢任何帮助，谢谢。

/* 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 class="">
  <label class="t2" for="password_current">Enter the current password (leave blank to not change)</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password" id="password_current" autocomplete="off"/>
   <input type="checkbox" class="togglePw" id="pw_current" onclick="showPassword('password_current')"/>
   <label for="pw_current" class="fa"></label>
  </div>
</p>

<p class="">
  <label class="t2" for="password_1">Enter your new password</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password_1" id="password_1" autocomplete="off" />
   <input type="checkbox" class="togglePw" id="pw_1" onclick="showPassword('password_1')"/>
   <label for="pw_1" class="fa"></label>
  </div>
</p>

<p class="">
  <label class="t2" for="password_2">Repeat your new password</label>
  <div class="input-group">
   <input type="password" class="field-settings" name="password_2" id="password_2" autocomplete="off" />
   <input type="checkbox" class="togglePw" id="pw_2" onclick="showPassword('password_2')"/>
   <label for="pw_2" class="fa"></label>
  </div>
</p>
</fieldset>

Answer 1

您需要在下面添加按钮，并在单击事件侦听器上添加功能，您可以检查字符串的长度，至少一个大写和特殊字符。如果您的病情已经错误。您也可以使用警报或吐司消息呈现错误消息。

注意：有关现成的功能，可在Google上找到。您的参考链接之一如下。

password_validator

快乐编码

Answer 2

访问此链接，我希望它能帮助您

http://jsfiddle.net.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;
    });

});