使用布尔值来解锁按钮

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为您提供了最好的接口，而服务器端（和数据库）数据验证对于安全性来说是必需的，所以最好将它们组合起来。评论中的链接很好地概述了原因。