Question

我有以下代码检查密码是否足够强并匹配并返回一个布尔值。如果返回的值为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按钮但它似乎没有做任何不确定是否它写得很糟糕或者是什么非常新的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就是这里的方式，但你对它的处理方式并不理想。您应该将RegisterCheck.php分开，并使用JavaScript与之通信，而不是将PHP嵌入页面本身。为此，您可以使用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为您提供了最佳的界面，而服务器端（和数据库）数据验证对于安全性是必需的，因此将它们组合起来是一种很好的做法。评论中的链接是对原因的绝佳概述。

使用布尔值到ungrey按钮

1 个答案: