Question

首先，我想说我意识到它不是一种安全的方法。这仅用于培训目的。

algorhitm应该是：

点击ID =＆＃34; login-bg＆＃34;
app显示横幅
提供代码
如果代码确定设置cookie并淡出横幅
如果代码不正确，则会震动（仍然保留在屏幕上）
如果您不想提供代码请按＆＃39;取消＆＃39;并淡出横幅

设置cookie功能（工作正常）：

<?php
    if(!isset($_COOKIE['is_logged']))
        { ?>
        <script type="text/javascript">
        function SetPwd(c_name,value,expiredays){
            var exdate=new Date()
            exdate.setDate(exdate.getDate()+expiredays)
            document.cookie=c_name+ "=" +escape(value)+";path=/"+             ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
            }
        </script>
<?php } ?>

这里一定是jQuery的问题：

<?php
        if(!isset($_COOKIE['is_logged']))
        { ?>
        <div id="login-bg">
            <div class="content">
                <h2>Provide the code!</h2>
                <form id="check-form" method="post" action="">
                    <input type="password" name="code" placeholder="code" id="code" />
                    <input type="submit" value="Submit" id="enjoy"/> 
                </form>
                <h3>And enjoy free access!</h3>
                <a id="cancel">Cancel</a>
            </div>
        </div>
        <script type="text/javascript">
        $(document).ready(function() {
            if( document.cookie.indexOf("is_logged") ===-1 ){
                $('#video').click(function(){
                    $("#login-bg").fadeIn('slow');
                });
                $('#cancel').click(function(){
                    $('#login-bg').fadeOut('slow');
                    //window.location = "<?php echo $this->baseUrl; ?>/index";
                });
            }
            $("#submit").click(function (){
                var value = $('#code').val();
                var pass = 'test';
                if( value == test ){
                    SetCookie('is_logged','is_logged',365*10)
                    $("#login-bg").remove();
                }
                else { 
                    $('#login-bg').effect( "shake" );
                }
            });
        });
        </script>
<?php } ?>

在我看来，价值＆＃39;＃code＆＃39; id没有从表单传递给jQuery 但我可能错了。

你有什么想法吗？你能让它发挥作用吗？谢谢你的帮助。

Answer 1

这里看起来很有问题..

var value = $('#code').val();
var pass = 'test';
if( value == test ){
    SetCookie('is_logged','is_logged',365*10)
    $("#login-bg").remove();
}

这不等于你想要它的方式：

if( value == test )

我建议将其更改为，

if( value == pass )

也改变了

$("#submit").click(

到

$("#enjoy").click(

Answer 2

我改变了。但是，系统仍然没有按预期运行。当我点击“提交”时，横幅就会消失（如果代码没有问题也没关系。）

我认为价值没有通过，因为当我做一个简单的测试时，会有任何警告：

$("#submit").click(function (){
                var value = $('#code').val();
                var pass = 'test';
                alert(value);
                if( value == pass ){
                    SetCookie('is_logged','is_logged',365*10)
                    $("#login-bg").remove();
                }
                else { 
                    $('#login-bg').effect( "shake" );
                }
            });

Answer 3

是的，您提交的点击处理程序不正确，在密码检查中您错过了报价＆＃39; test＆＃39;。（正如其他人已经回答的那样。）

以下是您的代码演示，此处位于jsFiddle。它为cookie使用jQuery cookie插件，但您的PHP cookie也可以使用。我没有演示的后端。

抱歉，由于操作不安全，它没有在SO上工作，可能这里不允许使用cookies。但是在jsFiddle，它正在发挥作用。

也不要使用$("#login-bg").remove();删除登录div，因为它将从DOM中删除，您可以再次向用户显示。最好只隐藏它。

＆＃13;

// if(!isset($_COOKIE['is_logged']))
$(document).ready(function () {
    if (!$.cookie('is_logged')) {
        console.log('not logged in, show form');
        //document.cookie.indexOf("is_logged") === -1) {
        //$('#video').click(function () {
        //$('#code').val(''); // clear input
        $("#login-bg").fadeIn('slow');
        //});
        $('#cancel').click(function () {
            $('#login-bg').fadeOut('slow');
            //window.location = "<?php echo $this->baseUrl; ?>/index";
        });
    } else {
        $('#mainContent').fadeIn('slow');
    }
    
    $('#logout').click(function () {
        console.log('hide clicked');
        $('#code').val(''); // clear input
        $('#mainContent').hide();
        $("#login-bg").fadeIn('slow');
        $.removeCookie('is_logged');
    });

    $("#check-form").on('click', 'input[type=submit]', function (evt) {
        evt.preventDefault();
        var value = $('#code').val();
        var pass = 'test';
        if (value == pass) { // 'test') {
            //SetCookie('is_logged', 'is_logged', 365 * 10)
            $.cookie('is_logged', 'true', {
                expires: 7
            });
            $('#mainContent').fadeIn('slow');
            $("#login-bg").hide(); // don't remove the login section
        } else {
            $('#login-bg').effect("shake");
        }
    });
});

＆＃13;

#login-bg {
    display: none;
}
#mainContent {
    display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>

<div id="login-bg">
    <div class="content">
         <h2>Provide the code!</h2>

        <form id="check-form" method="post" action="">
            <input type="password" name="code" placeholder="code" id="code" />
            <input type="submit" value="Submit" id="enjoy" />
        </form>
         <h3>And enjoy free access!</h3>
 <a id="cancel" href="#">Cancel</a>

    </div>
</div>
<div id="mainContent">
    <strong>Login succeeded!</strong> Shown after login!! 
    <a id="logout" href="#">Logout</a>

</div>

＆＃13;

jQuery客户端密码验证

3 个答案: