javascript - 表单 -> 具有 jQuery 验证的数据库

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 标签，编写 html，并在需要更多 php 时打开新的 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 .