パスワード強度が良好または強ければ、どのようにレジスタボタンを有効にしますか？

Question

私はパスワード強度にZXCVBN.jsを使用しています。期待どおりに動作しています。しかし、私はパスワードの強さが良いまたは強い表示されている場合にのみ登録ボタンを有効にしたい。

ここには作業codepenがあります。

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 = ""; 
} 
}); 

Answer 1

1. あなたはAngularJSを使用していません。 Angularの唯一のものはng-clickとng-modelですが、あなたはそれらを使用していません。あなたにはコントローラがありません。

2. EventListenerの外側の強度をチェックしていたので、チェックはonloadでした。

3. あなたは$('red')を使用していましたが、あなたのコードペンに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>

Answer 2

実際に、あなたは、単に**。JavaScriptを介して、または**無効または有効にjqueryのを使用して、ボタン要素の属性値を変更したり、使用して、ボタン要素にいくつかのクラスを追加することができます.addClass（クラス名） jqueryのプロパティ。例えば、 。

.classname{ 
disabled:true; 
}