Question

我使用jquery创建了一个登录弹出窗口，并通过页面中使用的php确认登录。当用户输入正确的凭据时，页面将被重定向到我想要的位置，但是当给出不正确的凭据时，弹出窗口消失，然后再次按下登录链接以查看表单上的消息。我希望弹出窗口保持“用户名/密码”消息不正确。我已经研究了很多，但我没有找到准确的答案。我看过一些例子，他们使用的是Ajax，但是我试着给我一个没有Ajax的解决方案，因为我从未使用它。

登录弹出的代码：index.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="jquery-2.0.2.min.js"></script>
    <script type="text/javascript" src="loginpopup.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
    <a href="#signin-box" class="loginwindow">Login/Register</a>

    <div id="signin-box" class="signin-popup">
        <a href="login.php" class="close"><img src="button_red_close.png" class="btn_close" title="Close"/></a>
        <form method="post" class="signin" action="<?php echo htmlspecialchars($_SERVER['PHP_SELF']); ?>">
            <fieldset>
                <p>
                <input class="input" id="email" name="email" type="email" autocomplete="on" placeholder="Email address" required /></p>
                <p><input class="input" id="password" name="password" type="password" placeholder="Password" required/></p>
                <p><input class="button" type="submit" value="Sign in" />
                <button class="button" type="button" id="register" >Register</button></p>
                <p><a class="forgot" href="#">Forgot your password?</a></p>
                <?php
                    require 'connect.php';
                if(isset($_POST['email'])&&isset($_POST['password'])) {
                    $email=htmlentities($_POST['email']);
                    $password=htmlentities($_POST['password']);
                    if(!empty($email)&&!empty($password)) {
                        $query="SELECT `name` FROM `users` WHERE `email`='".mysql_real_escape_string($email)."' and `password`='".mysql_real_escape_string($password)."'";
                        $query_run=mysql_query($query);
                        if(mysql_num_rows($query_run)==0) {

                ?>
                <p id="message">Username/Password is incorrect.</p>
                <?php   
                        }
                        else{
                            header('Location:timer.html');
                        }
                    }
                }
                ?>

            </fieldset>
          </form>
    </div>




</body>
</html>

JQuery代码：loginpopup.js

$(document).ready(function() {

/*  On clicking the Login link */

$('a.loginwindow').click(function() {
  $('.signin-popup').fadeIn(300);
});

/* On clicking close button */

$('.close').click(function(){
    $('.signin-popup').remove();
});


/* On clicking register button */

$('#register').click(function(){
    $('.signin-popup').remove();
    $('.signup-popup').fadeIn(300);
});

/* Clicking close button of register popup */
$('.close_signup').click(function(){
    $('.signup-popup').remove();
});

});

连接数据库：connect.php

<?php
$host='localhost';
$user='root';
$pass='';

$db='a_database';

$conn=mysql_connect($host,$user,$pass);
if(!$conn)
die("Error:".mysql_error());
else
if(!mysql_select_db($db,$conn))
    die("Error:".mysql_error());
?>

样式表：style.css

.signin-popup {
display: none;
background:#fff;
padding:20px 30px 20px 30px;
border: 2px solid #ddd;
float: left; 
position:fixed;
top: 20%;
left: 35%;
    z-index: 99999;
box-shadow: 0px 0px 20px #999;

/* CSS3 */
-moz-box-shadow: 0px 0px 20px #999;
/* Firefox */
-webkit-box-shadow: 0px 0px 20px #999;
/* Safari, Chrome */

border-radius: 15px;
/*  earlier 3px radius */
-moz-border-radius: 15px;
/* Firefox */
-webkit-border-radius: 15px;
/* Safari, Chrome */;
}
img.btn_close {
/* Position the close button */
float: right;
margin: -40px -40px 0 0;
}
fieldset {
    border: none;
}
form.signin{
display: block;
}
form.signin p{
color: #999;
font-size: 14px;
/*
line-height: 5px;
*/
}
form.signin .input {
border:3px solid #06F;
color: #797979;
font:normal 15px 'century gothic';
padding: 6px 4px;
width: 275px;
}

form.signin .input:focus{
border:3px solid #F30;
}
.button {
background: -moz-linear-gradient(center top, #0CF,#09F);
background: -webkit-gradient(linear, left top, left bottom, from(#0CF), to(#09F));
border:none;

color:#333;
cursor: pointer;
/*display: inline-block;*/
padding:8px 20px;
font:normal 15px "Comic Sans MS", cursive;
width:142px;
}
.button:hover {
background: -moz-linear-gradient(center top,#0FF,#0CF);
background: -webkit-gradient(linear, left top, left bottom, from(#0FF), to(#0CF));
font-weight:bold;
}
.forgot{
text-decoration:none;
font:normal 12px Verdana, Geneva, sans-serif;
color:#797979;
} 
#message{
text-align:center;
color:#F00;
font:bold 15px "Comic Sans MS", cursive;
}

Answer 1

我说你有两个选择：

如果您不希望页面刷新，则必须使用Ajax。对于像jQuery这样处理所有复杂内容的库来说，这很容易。
您不介意刷新页面，因此您可以在页面刷新时触发弹出窗口。有几种方法：URL中的参数，隐藏字段......您可以在$(document).ready()函数中检查它。

Answer 2

最简单的解决方案是在提交表单时调用javascript函数（提交按钮的onclick事件。使用Ajax验证用户凭据，如果正确返回true或调用窗体windows.frmname.submit（）的提交方法。

如果失败则返回false。

<script>

    function Validate()
    {
        Ajax call to validate..
        if sucess return true
        else return false
    }
</script>
    <input type="submit" onClick="return Validate();" />

Answer 3

如果条件不正确，很容易做出if条件，他将再次显示弹出消息并显示一条消息错误的密码。

不要忘记显示弹出窗口："flex";

登录弹出保持不正确的登录

3 个答案: