Javascript 如何使注册按钮仅在密码强度好或强时启用？

我使用ZXCVBN.js作为密码强度。它正在按预期工作。但是我只想在密码强度显示为good或strong时启用register按钮

这是一张工作票

---

实际上，您可以通过javascript或使用jquery将button元素的属性值更改为**disabled或active.**或使用jquery中的.addClass（classname）属性向button元素添加一些类。 例如

您没有使用AngularJS。唯一有角度的东西是

ng click

和

ng model

，但您甚至没有使用它们。你甚至没有控制器

您正在检查

EventListener

之外的强度，因此它只是检查

onload

您使用的是

$（'red'）

，但是您的代码笔中没有

Jquery

，并且没有任何id为

red

的元素。按钮的

id

为

reg

var强度={
0:“最差”，
1:“坏”，
2:“弱”，
3:“好”，
4：“强大”
}
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结果=zxcvbn（val）；
//更新密码强度计
meter.value=result.score；
//更新文本指示器
如果（val！==“”）{
text.innerHTML=“强度：”+强度[result.score]；
}否则{
text.innerHTML=“”；
}
如果（仪表值>=3）{
register.disabled=false；
}否则{
register.disabled=true；
}
});
按钮[已禁用]{
颜色：白色；
背景色：红色；
}
钮扣{
颜色：白色；
背景颜色：绿色；
}

密码

登记
您没有使用AngularJS，为什么不检查
meter.value
是否
=
大于3，然后执行所需操作我使用的是codepen中给出的AngularJS。如果你看到它，它有完整的代码。但我确实尝试了你说的不起作用的方法——我添加了以下代码——if（meter.value>=3）{$（“#reg”）.prop（'disabled'，true）；你应该读一下AngularJS……你只是在你的代码中使用javascript。谢谢你花时间评论和回答。我确实有一个控制器，但后来我想为什么在只需要html部分的情况下发布它。我确实使用了你的答案，但它没有按预期工作。我想我将不得不使用angular js来完成它？@HebleV如果您使用的是AngularJS，为什么您在这里使用纯JS？提供的代码段正在工作。显然，由于代码中的其他一些点，它不工作。什么不工作？是的，您是对的。代码段正在工作。由于其他一些部分，它不工作。因此，当我使用代码时，即使我在pas中输入单个字符剑场，按钮被启用。你能接受这个答案，因为它回答了你的问题。然后，如果你找不到你的问题，你可以问另一个问题。接受答案比解决问题更重要
 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 = "";
}
});

.classname{
disabled:true;
}