パスワード強度チェックによるjQueryフォームの検証

Question

jQueryの基礎知識がありました。私は現在、パスワードの強さのチェックとjQueryフォームの検証に取り組んでいます。私はパスワード強度チェック部分を終了しましたが、条件が満たされた後に送信ボタンを有効にする方法がわかりません。

Here is my code:https://codepen.io/jagan/pen/rzZqMq

Answer 1

あなたは、あなたが偽の設定フラグに依存することができ、それはより一般的な固体にしたい場合は、ステータスバーに応じて、ボタンを有効に簡単に高速の問題を解くのが、私は信じる無効に使用することができます

検証汚れた場合のみ検証動作場合は、trueに切り替えあなたが

$(document).ready(function(){ 
    $('#password').keyup(function(){ 
     var valid = true; 
     $('#result').html(checkStrength($('#password').val())); 
       //Calculated strength value, we can return messages 
     if(!valid){ 
      alert('errorMessage'); 
      } 

    }); 


    function checkStrength(password){ 
     var strength = 0; 


     //If password contains both lower and uppercase characters, increase strength value. 
     if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { 
      strength += 1 ; 
      $('.low-upper-case').addClass('text-success'); 

     } 
     else{ 
      $('.low-upper-case').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has numbers and characters, increase strength value. 
     if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ 
      strength += 1; 
      $('.one-number').addClass('text-success'); 

     } 
     else{ 
      $('.one-number').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has one special character, increase strength value. 
     if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { 
      strength += 1; 
      $('.one-special-char').addClass('text-success'); 

     } 
     else{ 
      $('.one-special-char').removeClass('text-success'); 
      valid = false; 
     } 

     if (password.length > 7){ 
     strength += 1; 
     $('.eight-character').addClass('text-success'); 

     } 
     else{ 
      $('.eight-character').removeClass('text-success'); 
      valid = false; 
     } 




     // If value is less than 2 

     if (strength < 2) 
     { 
      $('#result').removeClass() 
      $('#password-strength').addClass('progress-bar-danger'); 
      $('#result').addClass('text-danger') 
      $('#password-strength').css('width', '10%'); 
      $("#sign-up").attr("disabled",true) 
      return 'Very Weak'   
     } 
     else if (strength == 2) 
     { 
      $('#result').removeClass() 
      $('#result').addClass('good'); 
      $('#password-strength').removeClass('progress-bar-danger'); 
      $('#password-strength').addClass('progress-bar-warning'); 
      $('#result').addClass('text-warning') 
      $('#password-strength').css('width', '60%'); 
      $("#sign-up").attr("disabled",true) 
      return 'Week'  
     } 
     else if (strength == 4) 
     { 
      $('#result').removeClass() 
      $('#result').addClass('strong'); 
      $('#password-strength').removeClass('progress-bar-warning'); 
      $('#password-strength').addClass('progress-bar-success'); 
      $('#result').addClass('text-success'); 
      $('#password-strength').css('width', '100%'); 
      $("#sign-up").attr("disabled",false) 
      return 'Strong' 
     } 

    } 

     // if (passwordStatus == true){ 
     // $('#sign-up').prop("disabled", false); 
     // } 
}); 

Answer 2

をしたい方法は、以下のコードをチェックし、あなたが偽で初期化されたパスワードを検証するために、グローバル変数はJavaScriptを使用していました。

function checkStrength(password){ 
     var valid = true; 
     var strength = 0; 


     //If password contains both lower and uppercase characters, increase strength value. 
     if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)) { 
      strength += 1 ; 
      $('.low-upper-case').addClass('text-success'); 

     } 
     else{ 
      $('.low-upper-case').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has numbers and characters, increase strength value. 
     if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ 
      strength += 1; 
      $('.one-number').addClass('text-success'); 

     } 
     else{ 
      $('.one-number').removeClass('text-success'); 
      valid = false; 
     } 

     //If it has one special character, increase strength value. 
     if (password.match(/([!,%,&,@,#,$,^,*,?,_,~])/)) { 
      strength += 1; 
      $('.one-special-char').addClass('text-success'); 

     } 
     else{ 
      $('.one-special-char').removeClass('text-success'); 
      valid = false; 
     } 

     if (password.length > 7){ 
     strength += 1; 
     $('.eight-character').addClass('text-success'); 

     } 
     else{ 
      $('.eight-character').removeClass('text-success'); 
      valid = false; 
     } 
     if (valid){ 
     $('#sign-up').prop("disabled", false); 
     } 



    }