在JS函数中验证PHP变量

Question

我基本上是在为网站（不是太复杂的东西）构建一个锁屏，在该表单中有一个输入字段（用于密码）和一个按钮（输入提交）。如果密码正确（如果声明，因为只有2个预定义密码），则锁屏将消失，显示网站的其余部分。

我试图通过检查php中的输入并将其放在变量中来做到这一点。之后，我尝试使用json_encode（$ myvar）在JS中获得结果。但这是行不通的，因为无论我在那写什么，我都会得到同样的错误，提示密码错误。

我将在此处附加代码：

index.php：

<div id="lockscreen" style=" background: rgb(118,9,121); background: linear-gradient(10deg, rgba(118,9,121,1) 50%, rgba(244,0,255,1) 100%); z-index: 999; position: absolute; height: 275vh; overflow: hidden !important; position: fixed; ">
    <div class="lockContent">
        <form class="lockForm" method="POST" target="formRedirect">
        <input type="password" id="locktext" style=" color: white; width: 70%; height: 8vh; background-color: #80808087; " name="pass"></input>
        <button type="submit" class="btn btn-purple lockbutton" style=" height: 8vh; width: 10%; font-size: 85%; margin-top: -0.05%; " onclick="VerifyUser()"><i class="fas fa-key"></i>
        </button>

<?php
include 'assets/php/myphp.php';

$lockPass = $_POST['pass'];
$resultLock = CheckInput($lockPass);

?>


    </form>

            <script type="text/javascript">

        var result = <?php echo json_encode($resultLock); ?>;
        var Lockscreen = $("#lockscreen");

        function VerifyUser(){
            if(result == true)
            {
                Lockscreen.fadeOut(3000);
                alert("Welcome !");
            } 
                else alert("Incorrect password !");
        }

    </script>

    </div>
    <div class="lockWelcomeCont">
        <h2 class="text-uppercase lockWelcome" style=" font-size: 135%; "> Gain access by entering the password in the field below.</h2>
    </div>
    <div class="lockHintCont">
        <h4 class="text-uppercase lockHint" style=" margin-top: 2%; font-size: 14px; color: #ffffff; font-weight: 700; "> * The password is case sensitive.</h4>
    </div>

</div>

myphp.php

//rest of the code, nothing wrong here

function CheckInput($input){

if($input == "SPV" || $input == "TEACHERS"){
    return true;
} else {return false;}

}

怎么了，我该怎么办？ 谢谢大家 ！ ：）

**编辑：我正在寻找不使用AJAX的解决方案**

Answer 1

您不能使用onClick来使用提交操作来验证POST操作。 为此，您必须使用异步调用，例如阿贾克斯。

Answer 2

理想情况下，您希望在此处实现ajax。

但是，我认为您代码中的问题是您正在使用onclick()验证用户，即使表单已提交，也将在函数调用之后。如果没有AJAX，则服务器不会异步发出任何消息，因此$lockPass的值将始终保持与页面加载时的值相同，这是错误的。

从理论上讲，如果在提交表单后用户仍然停留在同一页面上，则可以检查$ _POST数据并验证用户是否存在$ _POST数据。否则，什么都不做。

尝试以下代码：

<div id="lockscreen" style=" background: rgb(118,9,121); background: linear-gradient(10deg, rgba(118,9,121,1) 50%, rgba(244,0,255,1) 100%); z-index: 999; position: absolute; height: 275vh; overflow: hidden !important; position: fixed; ">
    <div class="lockContent">
        <form class="lockForm" method="POST" target="formRedirect">
        <input type="password" id="locktext" style=" color: white; width: 70%; height: 8vh; background-color: #80808087; " name="pass"></input>
        <button type="submit" class="btn btn-purple lockbutton" style=" height: 8vh; width: 10%; font-size: 85%; margin-top: -0.05%; "><i class="fas fa-key"></i>
        </button>

<?php
include 'assets/php/myphp.php';

$lockPass = $_POST['pass'];
if(isset($_POST['pass'])){
    $resultLock = CheckInput($lockPass);
}else{
    $resultLock = "NotYet";
}

?>


    </form>

            <script type="text/javascript">

        var result = <?php echo json_encode($resultLock); ?>;
    if(result != "NotYet"){
        var Lockscreen = $("#lockscreen");

        function VerifyUser(){
            if(result == true)
            {
                Lockscreen.fadeOut(3000);
                alert("Welcome !");
            } 
                else alert("Incorrect password !");
        }
        VerifyUser(); //Call the function on page load, not on click
    }

    </script>

    </div>
    <div class="lockWelcomeCont">
        <h2 class="text-uppercase lockWelcome" style=" font-size: 135%; "> Gain access by entering the password in the field below.</h2>
    </div>
    <div class="lockHintCont">
        <h4 class="text-uppercase lockHint" style=" margin-top: 2%; font-size: 14px; color: #ffffff; font-weight: 700; "> * The password is case sensitive.</h4>
    </div>

</div>

Answer 3

如果您不想使用AJAX，请参见下面的代码。但是，这将刷新您的页面并依赖于POST数据。如果您希望页面在不重新加载的情况下解锁，那么您将必须提出AJAX请求。

 <?php
include 'assets/php/myphp.php';

$lockPass = isset($_POST['pass']) ? $_POST['pass'] : "";
$resultLock = CheckInput($lockPass);

if(isset($_POST['pass'])): //only add javascript if POST was executed.
?>
<script type="text/javascript">
    var result = <?php echo json_encode($resultLock); ?>;
    var Lockscreen = $("#lockscreen");

    function VerifyUser(){
        if(result == true)
        {
            Lockscreen.fadeOut(3000);
            alert("Welcome !");
        } 
        else alert("Incorrect password !");
    }

</script>
<?php endif; ?>
<div id="lockscreen" style=" background: rgb(118,9,121); background: linear-gradient(10deg, rgba(118,9,121,1) 50%, rgba(244,0,255,1) 100%); z-index: 999; position: absolute; height: 275vh; overflow: hidden !important; position: fixed; ">
    <div class="lockContent">
        <form class="lockForm" method="POST" name="loginForm">
            <input type="password" id="locktext" style=" color: white; width: 70%; height: 8vh; background-color: #80808087; " name="pass"></input>
            <button type="submit" class="btn btn-purple lockbutton" style=" height: 8vh; width: 10%; font-size: 85%; margin-top: -0.05%; "><i class="fas fa-key"></i>
            </button>
        </form>
    </div>
    <div class="lockWelcomeCont">
        <h2 class="text-uppercase lockWelcome" style=" font-size: 135%; "> Gain access by entering the password in the field below.</h2>
    </div>
    <div class="lockHintCont">
        <h4 class="text-uppercase lockHint" style=" margin-top: 2%; font-size: 14px; color: #ffffff; font-weight: 700; "> * The password is case sensitive.</h4>
    </div>
</div>

编辑AJAX

要使用ajax，请制作另一个文件并将其命名为ajaxlogin.php

<?php
include 'assets/php/myphp.php';

$lockPass = isset($_POST['pass']) ? $_POST['pass'] : "";
$resultLock = CheckInput($lockPass);

return $resultLock;
?>

以及您的主文件中（我尚未测试此代码）

<script type="text/javascript">

    var Lockscreen = $("#lockscreen");

    function VerifyUser(result){
        if(result == true)
        {
            Lockscreen.fadeOut(3000);
            alert("Welcome !");
        } 
        else alert("Incorrect password !");
    }

    $.post( "ajaxlogin.php", function( data ) {
      VerifyUser(data);
    });
</script>
<div id="lockscreen" style=" background: rgb(118,9,121); background: linear-gradient(10deg, rgba(118,9,121,1) 50%, rgba(244,0,255,1) 100%); z-index: 999; position: absolute; height: 275vh; overflow: hidden !important; position: fixed; ">
    <div class="lockContent">
        <form class="lockForm" method="POST" name="loginForm">
            <input type="password" id="locktext" style=" color: white; width: 70%; height: 8vh; background-color: #80808087; " name="pass"></input>
            <button type="submit" class="btn btn-purple lockbutton" style=" height: 8vh; width: 10%; font-size: 85%; margin-top: -0.05%; "><i class="fas fa-key"></i>
            </button>
        </form>
    </div>
    <div class="lockWelcomeCont">
        <h2 class="text-uppercase lockWelcome" style=" font-size: 135%; "> Gain access by entering the password in the field below.</h2>
    </div>
    <div class="lockHintCont">
        <h4 class="text-uppercase lockHint" style=" margin-top: 2%; font-size: 14px; color: #ffffff; font-weight: 700; "> * The password is case sensitive.</h4>
    </div>
</div>