使用布爾值來解鎖按鈕

Question

我有以下代碼，用於檢查密碼是否足夠強大並匹配並返回布爾值。有沒有辦法使用這個值來取消默認爲灰色的按鈕，如果返回的值是真的？我假設你會這樣做在JavaScript中，但我不知道。

<?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); 
} 

好了，所以我說用javascript ungrey下面的代碼/灰色按鈕，但它似乎沒有做任何事情，不知道它的厲害writen或什麼IM很新SRY。

$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 
    } 
} 

Answer 1

你是正確的，JavaScript是去這裏的路，但你要了解它的方式是不理想的。不要將PHP嵌入頁面本身，而應該將RegisterCheck.php分開，並使用JavaScript與它進行通信。要這樣做，你會使用AJAX，並處理腳本中的響應。

但是，第二個選項 - 對於這種特殊情況更好 - 是完全刪除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/

還有比具有單一傳達錯誤的用戶更優雅的方式alert-box會彈出每個可能的錯誤，但是這應該演示這個概念，並向您展示在JavaScr中複製此代碼所需的內容IPT。

附錄
按照下面的評論，你已經使用的JavaScript後驗證數據和活化最終的創建按鈕，您應該再使用服務器端驗證，當你處理提交的數據。 JavaScript爲您提供了最好的接口，而服務器端（和數據庫）數據驗證對於安全性來說是必需的，所以最好將它們組合起來。評論中的鏈接很好地概述了原因。