设置错误消息后登录表单中的php错误消息未显示

问题描述 投票：0回答：1

我正在尝试创建一个简单的登录系统，现在我想做到这一点，所以当用户输入用户名时，它与会话变量不匹配（不适用于数据库 atm），应该会出现错误消息说该帐户不存在。

我已经使用 jQuery 进行客户端表单验证，现在我想使用 ajax 来执行一个 php 脚本来检查用户名是否存在（即等于会话变量）而无需重新加载页面。

代码如下：

登录.php

<?php
session_start();
$error_msg = null;
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (empty($_SESSION['uname'])) {
        $error_msg = "Error: account does not exist";
    }
    else if ($_SESSION['uname'] == $_POST['uname'] &&
        $_SESSION['pw'] == $_POST['pw']) {
        header("Location: index.php");
    }
    else if ($_SESSION['uname'] != $_POST['uname']) {
        $error_msg = "Error: account does not exist";
    }
}
?>
<!DOCTYPE html>
<html lang="sv">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.19.5/jquery.validate.min.js"></script>
<script src="../js/form-validation.js"></script>
<head>
    <title> Login </title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="../css/style.css">
</head>
</html>
<body>
<div class="center" id="login_win">
    <!-- htmlspecialchars converts special characters to html entities
         which ensures that hackers cannot inject damaging scripts
         into the $_SERVER["PHP_SELF"] variable -->
    <form action="login_credentials.php"
          id="login_form"
          method="post"
          name="first_form">
        <h2>Login</h2>
        <?php if(isset($error_msg)) { ?>
            <p> <?php echo $error_msg ?> </p>
        <?php } ?>
        <label for="input_uname" id="uname_label">Username:</label>
        <input type="text" name="uname" id="input_uname"
               placeholder="Enter username">
        <br>
        <label for="input_pw" id="pw_label">Password:</label>
        <input type="password" name="pw" id="input_pw"
               placeholder="Enter password">
        <br>
        <button type="submit"
                id="submit_btn"> Sign in </button>

        <div id="not_reg">Not registered?
            <a href="signup.php" id="not_reg">Sign up</a>
        </div>
    </form>
</div>
</body>

CSS：

body {
    background-image: url("nature.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    width: 100%;
    height: 100%;
    image-rendering: crisp-edges;
}

#login_form, #signup_form {
    font-family: Algerian, serif;
    color: #355f5f;
    font-size: large;
}

.center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    width: 400px;
    height: 325px;
    box-shadow: 2px 2px 5px 5px rgba(0,0,0,0.15);
    border-radius: 25px;
}

#login_win, #signup_win {
    opacity: 85%;
}

form { margin-left: 30px; }
p { display: table-row; }

label {
    float: left;
}

input {
    height: 25px;
    margin-left: 30px;
}
#uname_label { margin-top: 3px; }
#input_username { margin-bottom: 20px; }

#pw_label { margin-top: 50px; }
#input_pw {
    margin-top: 47px;
    margin-right: 50px;
}

#input_uname-error,
#input_pw-error {
    color: crimson;
    font-family: Monospaced, serif;
    font-size: smaller;
    white-space: nowrap;
}
#input_uname-error {
    margin-top: -55px;
    margin-left: 130px;
}
#input_pw-error {
    margin-top: -55px;
    margin-left: 130px;
}

.center #login_form h2,
.center #signup_form h2 {
    text-align: center;
    margin-bottom: 30px;
    margin-right: 20px;
}

#input_email {
    margin-left: 50px;
}

#submit_btn {
    margin-top: 30px;
    margin-left: 165px;
    font-size: 16px;
}

#not_reg {
    margin-top: 30px;
    text-align: center;
    margin-right: 15px;
}

表单验证.js：

// Wait for the DOM to be ready
$(document).ready(function() {
    let data = {};
    $('#login_form').submit(function(event) {
        event.preventDefault();
    })
    .validate({
        rules: {
            uname:
                { minlength: 3, required: true },
            pw:
                { required: true, minlength: 5 } },
        messages: {
            uname: { required: "Please provide a username", },
            pw: { required: "Please provide a password", },
        },
        /* submit to action page when
        *  the form is valid */
        submitHandler: function() {
            let login_form = document.getElementById('login_form');
            let form_data = new FormData(login_form);
            let data_arr = [];
            for (const [key, value] of form_data.entries()) {
                data_arr[key] = value;
            }
            $.ajax({
                type: "POST",
                url: "login.php",
                data: { uname : data_arr['uname'], pw : data_arr['pw'] }
            })
                .done(function(msg) {
                   alert(msg);
                });
        }
    });
});

正如您在上面看到的，在 login.php 文件中，我尝试首先初始化错误消息变量，然后一旦表单数据被发回，错误消息也被分配一个字符串文本，我希望 if 语句在form 返回 true，因此错误消息应该打印在表单中。 所以我的问题是，为什么它不打印，或者错误消息为什么不显示在我的表单中？此时 if 语句应该为真。我错过了什么？提前谢谢你。

我试过把php验证码放在不同的文件里。我已经验证了所有 if 语句都是正确的，直到应该打印错误消息的语句为止。一旦设置了错误消息变量，我期待代码再次执行 if 语句。

javascript php forms validation session-variables
1个回答
0
投票

感谢 David 和 Barmar 的帮助，我让它工作了。 我将 php 代码放在它自己的文件中，并确保回显错误消息。

我在我的 html 代码中添加了一个 div：

<div id="error_msg"></div>
我希望错误消息出现的地方。然后，在 .ajax() 方法中，我添加了以下代码：

success: function(data) {
    $("#error_msg").html(data);
}

获取数据（已回显的数据）并将其转换为 html（如果我理解正确的话），然后将其放入 div 中，然后显示在我的表单中。 :)

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.