如何使注册按钮只有在密码强度好或强时才启用

How make the register button enable only if password strength is good or strong?

本文关键字：启用 密码 注册 何使 按钮      更新时间：2023-09-26

我使用ZXCVBN.js作为密码强度。它正在像预期的那样工作。但我想启用注册按钮，只有当密码的强度显示良好或强。

这是一个工作的代码依赖。

 var strength = {
 0: "Worst",
 1: "Bad",
 2: "Weak",
 3: "Good",
 4: "Strong"
 }
var password = document.getElementById('password');
var meter = document.getElementById('password-strength-meter');
var text = document.getElementById('password-strength-text');
password.addEventListener('input', function() {
var val = password.value;
var result = zxcvbn(val);
meter.value = result.score;
    if (val !== "") {
text.innerHTML = "Strength: " + strength[result.score]; 
} else {
text.innerHTML = "";
}
});

  1. 你没有使用AngularJS。Angular唯一的东西是ng-click和ng-model，但你甚至没有使用它们。你甚至都没有控制器

  2. 您检查的是EventListener以外的强度，因此只检查了onload。

  3. 您正在使用$('red')，但您的codepen中没有Jquery，并且您没有id : red的任何元素。按钮的id为reg 

 var strength = {
   0: "Worst",
   1: "Bad",
   2: "Weak",
   3: "Good",
   4: "Strong"
 }
 var password = document.getElementById('password');
 var meter = document.getElementById('password-strength-meter');
 var text = document.getElementById('password-strength-text');
 var register = document.getElementById('register');
 password.addEventListener('input', function() {
   var val = password.value;
   var result = zxcvbn(val);
   // Update the password strength meter
   meter.value = result.score;
   // Update the text indicator
   if (val !== "") {
     text.innerHTML = "Strength: " + strength[result.score];
   } else {
     text.innerHTML = "";
   }
   if (meter.value >= 3) {
     register.disabled = false;
   } else {
     register.disabled = true;
   }
 });
button[disabled] {
  color: white;
  background-color: red;
}
button {
  color: white;
  background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/zxcvbn/4.4.0/zxcvbn.js"></script>
<div class="col-md-6 col-md-offset-3">
  <label for="password">Password</label>
  <input type="password" name="password" id="password" class="form-control" ng-model="password" required />
  <meter max="4" id="password-strength-meter"></meter>
  <p id="password-strength-text"></p>
  <button type="submit" ng-click="register()" id="register" disabled>Register</button>
</div>

实际上，您可以简单地通过javascript或使用jquery将button元素的属性值更改为禁用或激活。**或添加一些类按钮元素使用。addclass (classname)属性在jquery。如:

.classname{
disabled:true;
}
相关文章：