3

True/False が Javascript でどのように機能するかを誤解しているかどうかはわかりません。以下の Jquery スクリプトでは、6 つの変数を false として宣言しています。正規表現の検証条件が良好であれば、変数を true に再宣言します。下部には、すべての変数が true の場合に通知する単純な alert() があります。

検証条件は機能しています (クラスの削除/追加) が、アラートは表示されません。そのため、真偽の部分をめちゃくちゃにしているかどうかはわかりません。

$('#password1').keyup(function() {
var checkLength = false;
var checkLetter = false;
var checkCaps = false;
var checkNum = false;
var checkSymbol = false;
var checkSpace = false;

var pswd = $(this).val();


//validate the length
if(pswd.length < 6 ){ 
 $('#length').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#length').removeClass('invalid').addClass('valid'); 
 checkLength = true; 
}

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}   

//validate no spaces
if(pswd.match(/\s/)){ 
 $('#spaces').removeClass('valid').addClass('invalid'); 
}else{ 
 $('#spaces').removeClass('invalid').addClass('valid'); 
 checkSpace = true; 
}

// here is where I'm concerned I'm wrong
if(checkLength == true && checkLetter == true && checkCaps == true && checkNum == true && checkSymbol == true && checkSpace == true){ 
    alert("All good"); 
}

});

誰かが私を再確認しますか？

4

3 に答える 3

7

最初は何も書く必要はありませんが、checkLength == trueすべてcheckLengthブール変数なので で十分です。

次に、一部の条件ではクラスを割り当てますinvalidが、var を true に設定しますが、他の条件ではその逆を行います。すべてcheck... = trueが と同じブランチにある必要がありますclass = valid。また、個人的には、有効条件を調整して、すべての肯定的なイベントがブランチifまたはelseブランチに含まれるようにしますが、現在のように混合しないようにします。最後に、コードの重複を避けるよう常に心がけています。リファクタリングできる場所はたくさんありますが、別の関数でクラスを設定することから簡単に始めることができます。

このフィドルで動作することを確認してください。

$('#password1').keyup(function() {
  var checkLength = false;
  var checkLetter = false;
  var checkCaps = false;
  var checkNum = false;
  var checkSymbol = false;
  var checkSpace = false;

  var pswd = $(this).val();


  //validate the length
  // reverse the condition, to have the valid state in the if branch as well
  if(pswd.length >= 6 ){ 
   setValid('#length'); 
   checkLength = true; 
  }else{ 
   setInvalid('#length');  
  }

  //validate letter
  if(pswd.match(/[A-Za-z]/)){
   setValid('#letter'); 
   checkLetter = true; 
  }else{ 
   setInvalid('#letter'); 
  }

  //validate capital letter
  if(pswd.match(/[A-Z]/)){ 
   setValid('#capital');
   checkCaps = true; 
  }else{ 
   setInvalid('#capital'); 
  }

  //validate number
  if(pswd.match(/\d/)){ 
   setValid('#number');
   checkNum = true;  
  }else{ 
   setInvalid('#number'); 
  }   

  //validate symbols
  if(pswd.match(/[^a-zA-Z0-9]/)){ 
   setValid('#symbol'); 
   checkSymbol = true; 
  }else{ 
   setInvalid('#symbol'); 
  }   

  //validate no spaces
  if(!pswd.match(/\s/)){
   setValid('#spaces'); 
   checkSpace = true;  
  }else{ 
   setInvalid('#spaces'); 
  }

  function setValid(e){$(e).removeClass('invalid').addClass('valid')} 
  function setInvalid(e){$(e).removeClass('valid').addClass('invalid')} 

  if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace){ 
  alert("All good"); 
  }
  console.log("keyup");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="password1" type="text">

于 2012-08-08T15:22:03.263 に答える
2

これらはすべてcheck* = true間違った場所にあります:

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
 checkLetter = true; 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
 checkCaps = true; 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
 checkSymbol = true; 
}

ifブロック内 (無効と見なされる) ではなく、ブロック (有効と見なされる) に続くブロックにステートメントを挿入しelseます。

//validate letter
if(pswd.match(/[A-Za-z]/)){ 
 $('#letter').removeClass('invalid').addClass('valid'); 
 checkLetter = true; 
}else{ 
 $('#letter').removeClass('valid').addClass('invalid'); 
}

//validate capital letter
if(pswd.match(/[A-Z]/)){ 
 $('#capital').removeClass('invalid').addClass('valid'); 
 checkCaps = true; 
}else{ 
 $('#capital').removeClass('valid').addClass('invalid'); 
}

//validate number
if(pswd.match(/\d/)){ 
 $('#number').removeClass('invalid').addClass('valid'); 
}else{ 
 $('#number').removeClass('valid').addClass('invalid'); 
 checkNum = true; 
}   

//validate symbols
if(pswd.match(/[^a-zA-Z0-9]/)){ 
 $('#symbol').removeClass('invalid').addClass('valid'); 
 checkSymbol = true; 
}else{ 
 $('#symbol').removeClass('valid').addClass('invalid'); 
}

バリデーションを記述するより良い方法はありますが、これは似ていますが、より簡潔なバージョンのスニペットです。

$("#password1").keyup(function() {
    var pswd = $(this).val();
    var checkLength = pswd.length >= 6;
    var checkLetter = /[A-Za-z]/.test(pswd);
    var checkCaps   = /[A-Z]/.test(pswd);
    var checkNum    = /\d/.test(pswd);
    var checkSymbol = /[^A-Za-z0-9]/.test(pswd);
    var checkSpace  = !/\s/.test(pswd);

    $("#length") .removeClass("valid invalid").addClass(checkLength ? "valid" : "invalid");
    $("#letter") .removeClass("valid invalid").addClass(checkLetter ? "valid" : "invalid");
    $("#capital").removeClass("valid invalid").addClass(checkCaps   ? "valid" : "invalid");
    $("#number") .removeClass("valid invalid").addClass(checkNum    ? "valid" : "invalid");
    $("#symbol") .removeClass("valid invalid").addClass(checkSymbol ? "valid" : "invalid");
    $("#spaces") .removeClass("valid invalid").addClass(checkSpace  ? "valid" : "invalid");

    if(checkLength && checkLetter && checkCaps && checkNum && checkSymbol && checkSpace) {
        alert("All good");
    }
});
于 2012-08-08T15:21:08.120 に答える
0

私には、あなたの割り当ては有効なステートメントのようです。彼らがあなたが望むように設定されているかどうかは別の問題です。

フラグの1つが、希望どおりに設定されていない可能性があります。これを確認するには、各フラグ（checkCapsなど）にアラートを送信して、各値が希望どおりに設定されていることを確認します。すべてのtrue/falseが正しい場合、問題は最終的なifステートメントにあります。

多くの人が示唆しているように、を削除すること== trueは良い考えです。Javascriptは動的に型付けされるため、フラグをブール値としてではなく、別のものとして扱っている可能性がわずかにあります。

を削除しても== true機能しない場合は、フラグのさまざまなペアをチェックして、ステートメント全体がfalseになるフラグのペアを確認できます。

于 2012-08-08T15:35:51.180 に答える