javascript - 使用 bool 值使按钮变为灰色

Question

我有以下代码，用于检查密码是否足够强且匹配并返回 bool 值。如果返回的值为 true，有没有办法使用此值来使默认为灰色的按钮变为灰色？我假设你会在 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/grey，但它似乎没有做任何事情，不确定它是否写得不好或者我很新。

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

与为每个可能的错误弹出一个警报框相比，有更优雅的方式向用户传达错误，但这应该演示这个概念，并向您展示在 JavaScript 中复制此代码所需的内容。

附录
根据下面的评论，在使用 JavaScript 验证数据并激活最终的“创建”按钮后，您应该在处理数据提交时使用服务器端验证。 JavaScript 为您提供了最好的界面，而服务器端(和数据库)数据验证对于安全性是必要的，因此将它们结合起来是一个很好的做法。评论中的链接很好地概述了原因。