0

我正在为我正在构建的 PHP 身份验证系统构建前端，我正在使用 jQuery，我或多或少地了解基础知识，并且在登录、注册和激活页面上成功使用它来显示错误/成功消息，在发送之前对密码进行哈希处理，为用户分配一个 cookie 并进行表单验证。

我目前正在研究重置系统，这部分是第 2 步，用户收到重置请求电子邮件后，他们会来到网站并输入重置代码，或者使用直接链接并单击按钮。然后 jQuery 向服务器发送一个请求来验证重置键，如果不正确，显示适当的消息，如果正确，清除 .form div 并用另一个表单 (#resetpass) 替换它。在这种形式中，用户输入他们的新密码，然后应该将其发送到服务器，但由于某种原因，jQuery 没有捕获提交并且表单正在正常提交，而不是通过 Ajax，我一直在查看代码很长一段时间以来，改变这个和那个，没有积极的结果。我究竟做错了什么 ？

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PHPAuth 2.0 - Reset Password</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!-- Base CSS -->
<link href="css/reset.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- Jquery CSS (UI + Addons) -->
<link href="css/ui-lightness/jquery-ui.custom.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.qtip.css" rel="stylesheet" type="text/css" />
<!-- Jquery base file + Jquery UI -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.message.js"></script>
<!-- Jquery plugins for this page : To be compiled -->
<script type="text/javascript" src="js/reset/jquery.validate.js"></script>
<script type="text/javascript" src="js/reset/jquery.qtip.js"></script>
<script type="text/javascript" src="js/reset/jquery.crypt.js"></script>
</head>

<body>
<div class="logo"></div>
<div class="form">
    <form id="reset" method="post">
        <input type="text" name="resetkey" id="password" placeholder="Reset Key" <?php if(isset($_GET['key'])) { echo "value=\"" . $_GET['key'] . "\" "; } ?>/>
        <input type="submit" id="reset" value="Reset Password" />
    </form>
</div>
<div class="small">
    <a href="?page=login">I know my password</a><br/>
</div>

<script type="text/javascript">
$(document).ready(function(){
    $('#reset').validate({
            errorClass: "errormessage",
            onkeyup: false,
            errorClass: 'error',
            validClass: 'valid',
            rules: {
                password: { required: true, minlength: 3, maxlength: 100 }
            },
            errorPlacement: function(error, element)
            {
                var elem = $(element),
                    corners = ['right center', 'left center'],
                    flipIt = elem.parents('span.right').length > 0;

                if(!error.is(':empty')) {
                    elem.filter(':not(.valid)').qtip({
                        overwrite: false,
                        content: error,
                        position: {
                            my: corners[ flipIt ? 0 : 1 ],
                            at: corners[ flipIt ? 1 : 0 ],
                            viewport: $(window)
                        },
                        show: {
                            event: false,
                            ready: true
                        },
                        hide: false,
                        style: {
                            classes: 'ui-tooltip-red'
                        }
                    })
                    .qtip('option', 'content.text', error);
                }
                else { elem.qtip('destroy'); }
            },
            success: $.noop,
    })


    $('#resetpass').validate({
            errorClass: "errormessage",
            onkeyup: false,
            errorClass: 'error',
            validClass: 'valid',
            rules: {
                resetkey: { required: true, minlength: 20, maxlength: 20 }
            },
            errorPlacement: function(error, element)
            {
                var elem = $(element),
                    corners = ['right center', 'left center'],
                    flipIt = elem.parents('span.right').length > 0;

                if(!error.is(':empty')) {
                    elem.filter(':not(.valid)').qtip({
                        overwrite: false,
                        content: error,
                        position: {
                            my: corners[ flipIt ? 0 : 1 ],
                            at: corners[ flipIt ? 1 : 0 ],
                            viewport: $(window)
                        },
                        show: {
                            event: false,
                            ready: true
                        },
                        hide: false,
                        style: {
                            classes: 'ui-tooltip-red'
                        }
                    })
                    .qtip('option', 'content.text', error);
                }
                else { elem.qtip('destroy'); }
            },
            success: $.noop,
    })
});

$("#reset").submit(function(event) {
    if($("#reset").valid()) {
        event.preventDefault(); 

        var $form = $( this ),
            resetkey = $form.find('input[name="resetkey"]').val();


        $.post("inc/action.php?a=reset2", {key: resetkey},
            function(data) {
                if(data['error'] == 1)
                {
                    $("#message").remove();

                    $(".form").prepend('<div id="message"></div>');

                    $("#message").message({type: "error", dismiss: false, message: data['message']});

                    $("#message").effect("shake", {times: 2, distance: 10}, 200);
                }
                else if(data['error'] == 0)
                {                           
                    $(".form").empty();

                    $(".form").append('<form id="resetpass" method="post">');
                    $("#resetpass").append('<input type="hidden" name="resetkey" value="' + resetkey + '" />');
                    $("#resetpass").append('<input type="password" name="password" id="password" placeholder="New Password" />');
                    $("#resetpass").append('<input type="submit" id="reset" value="Change Password" />');
                }
            }, "json"
        );
    }
    else
    {
        $("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
        return false;
    }
});

$("#resetpass").submit(function(event) {
    if($("#resetpass").valid()) {
        event.preventDefault(); 

        var $form = $( this ),
            resetkey = $form.find( 'input[name="resetkey"]' ).val(),
            pass = $().crypt({method:"sha1",source:$().crypt({method:"sha1",source:$form.find( 'input[name="password"]' ).val()})});

        $.post("inc/action.php?a=reset3", {key: resetkey, password: pass},
            function(data) {
                if(data['error'] == 1)
                {
                    $("#message").remove();

                    $(".form").prepend('<div id="message"></div>');

                    $("#message").message({type: "error", dismiss: false, message: data['message']});

                    $("#message").effect("shake", {times: 2, distance: 10}, 200);
                }
                else if(data['error'] == 0)
                {           
                    $("#message").remove();

                    $(".form").prepend('<div id="message"></div>');

                    $("#message").message({type: "info", dismiss: false, message: data['message']});

                    $("#message").effect("pulsate", {times: 2}, 200);
                }
            }, "json"
        );
    }
    else
    {
        $("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
        return false;
    }
});
</script>
</body>
</html>

任何帮助是极大的赞赏 ：）

4

2 回答 2

0

为什么你有 2 个标签具有相同的 id 'reset' 尝试而不是 reset.submit

<form id="resetfrm" method="post" onsubmit="fnSubmit();return false;">

function fnSubmit(){
    if($("#reset").valid()) {      
        var $form = $( this ),
            resetkey = $form.find('input[name="resetkey"]').val();


        $.post("inc/action.php?a=reset2", {key: resetkey},
            function(data) {
                if(data['error'] == 1)
                {
                    $("#message").remove();

                    $(".form").prepend('<div id="message"></div>');

                    $("#message").message({type: "error", dismiss: false, message: data['message']});

                    $("#message").effect("shake", {times: 2, distance: 10}, 200);
                }
                else if(data['error'] == 0)
                {                           
                    $(".form").empty();

                    $(".form").append('<form id="resetpass" method="post">');
                    $("#resetpass").append('<input type="hidden" name="resetkey" value="' + resetkey + '" />');
                    $("#resetpass").append('<input type="password" name="password" id="password" placeholder="New Password" />');
                    $("#resetpass").append('<input type="submit" id="reset" value="Change Password" />');
                }
            }, "json"
        );
    }
    else
    {
        $("[id^=ui-tooltip-]").effect("pulsate", {times: 3}, 300);
        return false;
    }

}
于 2012-07-29T17:21:36.057 回答
0

由于 irc.freenode.net 上 #jquery 中的 Shoky 解决了问题

只需在 window_timeout 函数中将这些内容添加到 DOM 之后，将我的所有代码都用于验证和提交。

于 2012-08-02T00:34:34.037 回答