2017-03-07 4 views
0

パスワードが十分強​​く、ブール値を返すかどうかをチェックする次のコードがあります。返される値がtrueの場合、デフォルトでグレーであるボタンをungreyするためにこの値を使用する方法はありますか?私はあなたがjavascriptでこれを行うだろうと思うが、わからない。ブール値をungreyボタンに使用

<?php 
include("RegisterCheck.php"); 
?> 

<form action="" method="post" style="text-align:center"> 

<input type="text" placeholder="Username" id="user" name="user"><br/><br/> 
<input type="password" placeholder="Password" id="pass" name="pass"><br/><br/> 
<input type="password" placeholder="Re-Password" id="CheckPass" name="CheckPass"><br/><br/> 
<input type="submit" value="Check availibility" name="Check Account"> 
</form> 
<form action="CreateAccount.php" method="post" style="text-align:center"> 
<input type="button" id="Create" name="Create" value="Create Account" onclick="greybutton(CreateButton)" /> 
</form> 

<?php 
$pass = $_POST['pass']; 
$CheckPass = $_POST['CheckPass']; 

function CheckSame($pass, $CheckPass){ 
return $pass == $CheckPass; 
} 
function CheckStrength($pass) 
{ 
$errors = []; 

if (strlen($pass) < 8) { 
    $errors[] = "Password too short!"; 
} 

if (!preg_match("#[0-9]+#", $pass)) { 
    $errors[] = "Password must include at least one number!"; 
} 

if (!preg_match("#[a-zA-Z]+#", $pass)) { 
    $errors[] = "Password must include at least one letter!"; 
} 

return (empty($errors)); 
} 

function buttonGreyed($pass,$Checkpass){ 
return CheckStrength($pass) && CheckSame($pass, $Checkpass); 
} 

[OK]をので、私はungreyするためにJavaScriptを使用して、次のコードを追加/ボタンを灰色が、そのひどく書かまたは何イム非常に新しいSRY場合はわからない何かをするように見えるdoes notの。

$greyed = buttonGreyed($pass, $CheckPass); 

<script type="text/javascript"> 
function greybutton(CreateButton) { 
    var php_var = "<?php echo $greyed; ?>"; 
    if php_var = true { 
     Createbutton.disabled = false 
    } 
    else{ 
     CreateButton.disabled = true 
    } 
} 

+1

Javascriptはボタンの色を切り替える方法です。

を使用することをお勧めします。このように、ブールリプライはJavascript関数でリクエストを実行し、その情報を処理するのは簡単です。 –

+0

@ MarkBellamy私は、ボタンがクリックされた後にSQLコードを実行するのに役立つかどうかはわかりません。思考iveは、それほど病気ではないと思っていました。 –

+2

ユーザーが望む[passwords/phrases](https://xkcd.com/936/)を使用できるようにします。 [パスワードを制限しないでください。](http://jayblanchard.net/security_fail_passwords。html) –

答えて

1

あなたはJavaScriptがここに行くための方法ですが、あなたはそれについてつもり方法は理想的ではないということですね。あなた自身のPHPをページ自体に埋め込むのではなく、RegisterCheck.phpを別にしておき、JavaScriptと通信する必要があります。そのようにするには、AJAXを使用し、スクリプト内の応答を処理します。

ただし、この特定のケースでは2番目のオプションは、RegisterCheck.phpスクリプトを完全に削除し、JavaScriptを使用して検証を行うことです。 PHPスクリプトでやっていることはすべてJavaScript内で行うことができます(この例ではjQueryを使用しています。必要なコーディングが簡素化されていますので、ページにjQueryライブラリを含めてくださいこの例)。

フォーム送信とPHPスクリプトが必要なものを処理するのではなく、チェックボタンにID値を追加する必要があります(この例ではcheck_btnを使用しています)。行:あなたは修正された形でそれを確認することができますので、

$(document).ready(function() { // Tell page to proceed only once document is fully rendered 
    $("#check_btn").click(function(e) { // Binds click event from button with ID "check_btn" to this function 
     e.preventDefault(); // Tells script to STOP the default event of the submit button, prevents form submit 
     var a_pass = $("#pass").val(); 
     var c_pass = $("#CheckPass").val(); 
     var fail = false; 

     // same regular expressions as original PHP 
     var regex_a = /[a-zA-Z]+/; 
     var regex_b = /[0-9]+/; 

     // handle the checks 
     if (a_pass != c_pass) { 
      alert("Passwords do not match, please try again."); 
      fail = true; 
     } 
     else if (a_pass.length<8) { 
      alert("Password is too short -- passwords must be at least 8 characters."); 
      fail = true; 
     } 
     else if (!regex_a.test(a_pass)) { 
      alert("Password must include at least one letter."); 
      fail = true; 
     } 
     else if (!regex_b.test(a_pass)) { 
      alert("Password must include at least one number."); 
      fail = true; 
     } 

     // then handle the final step 
     if (fail) { 
      $("#pass").focus(); 

      // And optionally, the below rows would clear the entered passwords. 
      $("#pass").val(""); 
      $("#CheckPass").val(""); 
     } 
     else { 
      $("#Create").prop("disabled", false); 
     } 
    });  
}); 

私はこののJSFiddleを設置しました:https://jsfiddle.net/58ze8ytw/1/

シングルを持つよりも、ユーザーにエラーを伝えるよりエレガントな方法があります。警告ボックスが表示される可能性のあるエラーごとにポップアップ表示されますが、これはコンセプトをデモして、JavaScrでこのコードを複製するために必要なものを表示する必要がありますipt。

補遺以下のコメントを1として
、あなたがデータを検証するためにJavaScriptを使用して、最終的には、ボタンを作成してアクティブにした後でデータの提出を処理しているとき、あなたは、サーバー側の検証を使用する必要があります。 JavaScriptは最良のインターフェイスを提供しますが、サーバー側(およびデータベース)のデータ検証はセキュリティのために必要ですが、それらを組み合わせることをお勧めします。コメントのリンクは、その理由の優れた概要です。

+0

これを私のプログラムに実装していただきありがとうございます。それを何度か見て、XD –

+2

を理解してください。[クライアント側の検証は便利で便利ですが、バイパスすることができます。 ***常に***サーバー側で検証します。](http://stackoverflow.com/questions/162159/javascript-client-side-vs-server-side-validation) –

+0

私は完全に同意しますが、最初のボタン - サーバー側の検証は、2番目のボタンによってトリガーされた作成に応答して実行する必要があります。最初のボタンはjavascriptの理想的なケースです。 –

関連する問題