表单 -> 带有 jQ​​uery 验证的数据库

Question

我的表单有点卡住了，我不知道如何解决我当前的问题。我制作了一个表格，以便用户可以更改他的密码。我想用 jQuery 验证表单。因此我使用来自http://jqueryvalidation.org/ 的插件！

我的更新功能，因此表单正在工作。此外，如果我输入例如 3 个字母的密码，我会收到一条错误消息，因此 jQuery 验证也可以正常工作。

我现在的问题是，即使存在密码不相等或密码太短等问题，我也可以提交表单。每次单击提交按钮时都会提交表单。

我不是一个优秀的 jQuery，但我阅读了有关 submitHandler 的一些内容并尝试了它（请参阅下面的代码）但它不起作用。

谁能告诉我我的代码应该是什么样子，以便表单只有在通过 jQuery 验证时才会提交？如果可能的话，我不想更改我的 php 代码，因为我正在使用函数来插入和更新我的数据库。如果有人可以帮助我，那就太好了。

<?php

    $sessioninfo=getSessionInfo($sid);
    $gl_userid=$sessioninfo["pers_id"][0];
    $userdata=getUserInfo($gl_userid,0);



    if (isset ($_POST['submit'])) {

        $content=array("password"=>crypt($pwdnew1));
        updateUserInfo($gl_userid,$content);

        if(updateUserInfo($gl_userid, $content)==TRUE){
        $msg_success ="Your password was changed successfully!";
        } else {
        $msg_error ="ERROR! Your password could not be changed caused by an error! Please check and try again...";
        }

    }

    print "<div class='widget-box'>";
    print "<div class='widget-header'>";
    print "<h5 class='widget-title'>You can change your Password here</h5>";
    print "</div>";
    print "<div class='widget-body'>";
    print "<div class='widget-main'>";
    print "<form class='form-horizontal' name='changepwd' id='changepwd' action='./index.php' method='post'>\n";
    print "<input type='hidden' name='func' value='chpwd'>\n";
    print "<input type='hidden' name='sid' value='".$sid."'>\n";
    print "<div class='form-group'>";
    print "<label for='inputName' class='col-sm-4 control-label'>Your ID:</label>";
    print "<div class='col-sm-6'>";
    print "<input type='text' class='form-control' name='yourid' id='yourid' placeholder='Your ID' value='$gl_userid' readonly>";
    print "</div>";
    print "</div>";
    print "<div class='form-group'>";
    print "<label for='inputOldPassword' class='col-sm-4 control-label'>Your old Password:</label>";
    print "<div class='col-sm-6'>";
    print "<input type='password' class='form-control' name='pwdold' id='pwdold' placeholder='Enter your current Password'>";
    print "</div>";
    print "</div>";
    print "<div class='form-group'>";
    print "<label for='inputNewPassword' class='col-sm-4 control-label'>New Password:</label>";
    print "<div class='col-sm-6'>";
    print "<input type='password' class='form-control' name='pwdnew1' id='pwdnew1' placeholder='Enter your new Password'>";
    print "</div>";
    print "</div>";
    print "<div class='form-group'>";
    print "<label for='inputRepeadPassword' class='col-sm-4 control-label'>Repead your new Password:</label>";
    print "<div class='col-sm-6'>";
    print "<input type='password' class='form-control' name='pwdnew2' id='pwdnew2' placeholder='Enter your new Password'>";
    print "</div>";
    print "</div>";
    print "<div class='form-group'>";
    print "<div class='col-sm-offset-5 col-sm-4'>";
    print "<button type='submit' name='submit' value='submit' class='btn btn-warning btn-lg btn-block'>Change Password</button>";
    print "</div>";
    print "</div>";
    print "</form>";

    if(isset($msg_success)){ echo '<div class="alert alert-success"> <a href="#" class="close" data-dismiss="alert">&times;</a>'.$msg_success.' </div>'; }
    if(isset($msg_error)){ echo '<div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert">&times;</a>'.$msg_error.' </div>'; }

    print "</div>";
    print "</div>";
    print "</div>";

    print "<script src='./bootstrap/assets/js/jquery.validate.js'></script>";
    print "<script src='./bootstrap/assets/js/additional-methods.js'></script>";

?>

        <script type="text/javascript">
            $('#changepwd').validate({
                    errorElement: 'div',
                    errorClass: 'help-block',
                    focusInvalid: false,
                    ignore: "",
                    rules: {
                        pwdold: {
                            required: true,
                            pwdold:true
                        },
                        pwdnew1: {
                            required: true,
                            minlength: 5
                        },
                        pwdnew2: {
                            required: true,
                            minlength: 5,
                            equalTo: "#pwdnew1"
                        }

                    },

                    highlight: function (e) {
                        $(e).closest('.form-group').removeClass('has-info').addClass('has-error');
                    },

                    success: function (e) {
                        $(e).closest('.form-group').removeClass('has-error');//.addClass('has-info');
                        $(e).remove();
                    },

                    errorPlacement: function (error, element) {
                        if(element.is('input[type=checkbox]') || element.is('input[type=radio]')) {
                            var controls = element.closest('div[class*="col-"]');
                            if(controls.find(':checkbox,:radio').length > 1) controls.append(error);
                            else error.insertAfter(element.nextAll('.lbl:eq(0)').eq(0));
                        }
                        else if(element.is('.select2')) {
                            error.insertAfter(element.siblings('[class*="select2-container"]:eq(0)'));
                        }
                        else if(element.is('.chosen-select')) {
                            error.insertAfter(element.siblings('[class*="chosen-container"]:eq(0)'));
                        }
                        else error.insertAfter(element.parent());
                    },

                    submitHandler: function (form) {
                    $.post("index.php", $("#changepwd").serialize());
                    },

                    invalidHandler: function (form) {
                    }
                });
        </script>

Answer 1

看起来是下面这行：

                    pwdold: {
                        required: true,
                        pwdold:true
                    },

如果你这样做：

                    pwdold: "required",

It should work。我不知道你想用那行 pwdold:true 做什么。

现在，话虽如此，让我们花时间谈谈一些事情。

• 首先，除了客户端验证之外，您必须拥有服务器端验证。我可以在浏览器中禁用javascript 并关闭所有客户端验证。所以你需要在 php.ini 中复制这些规则。或者，您可以在表单提交上设置服务器端验证，它会响应错误，并且只在一个地方进行验证。

• 其次，你做的 HTML 都错了。 PHP 在某种程度上是一种模板语言。当您需要更多php 时，您可以关闭php 标签、编写html 并打开新的php 标签。您甚至可能想研究更明确的模板系统，例如 twig 或 blade。

• 第三，如果这无论如何都不仅仅是一个简单的实验练习，而且你希望人们使用它，我强烈建议你学习和使用一个框架。我个人的偏好是Laravel。他们有很多很好的文档和资源。如果你想自己动手，The PHP League 有一些很好的包可以帮助你做到这一点。

• 第四，查看phptherightway。这是一个非常有用的关于使用PHP 构建应用程序的介绍，并且可以在将来为您省去很多麻烦。

• 最后，记住你应该always code as if the guy who ends up maintaining your code will be a violent psychopath who knows where you live。