Question

我开始学习Web开发并尝试为我的网站构建登录屏幕。
通常，当用户登录时，他将被重定向到“欢迎”页面（在我使用所有Javascript之前就是这种情况）。现在，单击“登录”将刷新页面。
这是我的PHP文件

<head>
    <?php include $_SERVER['DOCUMENT_ROOT'] . "\include\header.php";?>
    <title>Login</title>
    <link rel="icon" type="image/png" href="http://localhost/image/login/navi.png"/>
</head>
<?php
    // Initialize the session
    session_start();
    // Check if the user is already logged in, if yes then redirect him to welcome page
    if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true && time() < $_SESSION["expire"]){
        header("location: http://localhost/main/welcome.php");
    exit;
    }
    $email = $password = "";
    $email_err = $password_err = "";
    if($_SERVER["REQUEST_METHOD"] == "POST"){

        // Validate credentials
    if(empty($email_err) && empty($password_err)){
        // Prepare a select statement
        $sql = "SELECT userid, username, email, password FROM users WHERE email = ?";

        if($stmt = mysqli_prepare($link, $sql)){
            // Bind variables to the prepared statement as parameters
            mysqli_stmt_bind_param($stmt, "s", $param_email);

            // Set parameters
            $param_email = $email;

            // Attempt to execute the prepared statement
            if(mysqli_stmt_execute($stmt)){
                // Store result
                mysqli_stmt_store_result($stmt);

                // Check if username exists, if yes then verify password
                if(mysqli_stmt_num_rows($stmt) == 1){                    
                    // Bind result variables
                    mysqli_stmt_bind_result($stmt, $id, $username, $email, $hashed_password);
                    if(mysqli_stmt_fetch($stmt)){
                        if(password_verify($password, $hashed_password)){
                            // Password is correct, so start a new session
                            session_start();

                            // Store data in session variables
                            $_SESSION["loggedin"] = true;
                            $_SESSION["id"] = $id;
                            $_SESSION["username"] = $username;
                            $_SESSION['start'] = time(); // Taking now logged in time.
                            $_SESSION['expire'] = $_SESSION['start'] + (30 * 60);

                            // Redirect user to welcome page
                            header("location: http://localhost/main/welcome.php");
                        } else{
                            // Display an error message if password is not valid
                            $password_err = "Wrong password";
                        }
                    }
                } else{
                    // Display an error message if username doesn't exist
                    $email_err = "Wrong email";
                }
            } else{
                echo "Oops! Something went wrong. Please try again later.";
            }

            // Close statement
            mysqli_stmt_close($stmt);
        }
    }

    // Close connection
    mysqli_close($link);
}
?>   
<body class="background">
    <div class="bgoverlay">
        <div class="login-container">
            <div class="wrap-login">
                <span class="login-form-title">
                    Account Login
                </span>

                <form class="login-form login-validate-form" >
                    <div id="email" class="login-wrap-input login-validate-input" data-validate = "Enter email">
                        <input class="login-input" type="text" name="email" placeholder="Email">
                        <span class="login-focus-input" data-placeholder="&#xea1e;"></span>
                    </div>

                    <div class="login-wrap-input login-validate-input" data-validate="Enter password">
                        <input id="password" class="login-input" type="password" name="password" placeholder="Password">
                        <span class="login-focus-input" data-placeholder="&#xe96b;"></span>
                        <span toggle="#password" class="login-show-pass see toggle-password"></span>
                    </div>

                    <div class="container-login-form-btn">
                        <?php 
                            if($email_err != null || $password_err !=null) {
                                echo '<script type="text/javascript">alert("'.$email.$password.'");</script>';
                            }
                        ?>
                        <input type="submit" class="login-form-btn" value="Login">
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div id="dropDownSelect1"></div>

    <script src="http://localhost/root/js/jquery-3.5.0.min.js"></script>
    <script src="http://localhost/root/js/login.js?<?php echo(rand(0,999999));?>"></script>
</body>
</html>

*老实说，我不知道该给哪一部分，所以我认为最好把它们都放在以防万一的地方。
这是我一直在修复的Javascript

(function ($) {
    "use strict";


    /*==================================================================
    [ Focus input ]*/
    $('.login-input').each(function(){
        $(this).on("blur", function(){
            if($(this).val().trim() != "") {
                $(this).addClass('login-has-val');
            }
            else {
                $(this).removeClass('login-has-val');
            }
        })    
    })


    /*==================================================================
    [ Validate ]*/
    var input = $('.login-validate-input .login-input');

    function validate (input) {
        if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
            if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
                return false;
            }
        }
        else {
            if($(input).val().trim() == ''){
                return false;
            }
        }
    }

    $('.login-validate-form').on('submit',function(){
        var check = true;

        for(var i=0; i<input.length; i++) {
            if(validate(input[i]) == false){
                showValidate(input[i]);
                check=false;
            }
        }

        return check;
    });


    $('.login-validate-form .login-input').each(function(){
        $(this).focus(function(){
           hideValidate(this);
        });
    });

    function showValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).addClass('login-alert-validate');
    }

    function hideValidate(input) {
        var thisAlert = $(input).parent();

        $(thisAlert).removeClass('login-alert-validate');
    }

    /*==================================================================
    [ Show pass ]*/
    jQuery(document).ready(function() {
        jQuery(".show-pass").hide();
    });

    jQuery("#password").change(function() {
        if(this.value.replace(/\s/g, "") === "") {
           jQuery(".show-pass").hide();
        } else {
           jQuery(".show-pass").show();
        }
    });

    jQuery(".show-pass").change(function() {
        jQuery("#password").val("");
        jQuery(this).hide();
     });

    $(".toggle-password").click(function() {

        $(this).toggleClass("unsee");
        var input = $($(this).attr("toggle"));
        if (input.attr("type") == "password") {
          input.attr("type", "text");
        } else {
          input.attr("type", "password");
        }
      });

})(jQuery);

This is what the URL look like after pressed Login

Answer 1

看看您的PHP代码，考虑到请求应该是POST

if($_SERVER["REQUEST_METHOD"] == "POST") ...

，并且表单的HTML标记没有方法，默认情况下为 GET 。您需要像这样编辑表单标签

<form class="login-form login-validate-form" method="post" action="URL.php">

Answer 2

您选择的路径可能不正确，请重新确认正确的路径，否则您可以尝试将标题更改为：

header("location:welcome.php");

登录按钮保持刷新页面

2 个答案: