Question

我尝试使用jquery插件实现表单验证。如果我单击提交按钮，除了执行php代码并创建cookie userid和username之外没有任何反应。添加$.ajax({后，表单验证规则将被忽略，重定向失败，但没有$.ajax({ php代码将无法正常工作。验证，PHP代码和重定向如何一起工作？

我的HTML代码：

    <head>
        <meta charset="UTF-8" /> 
        <title>
        HTML Document Structure
        </title>    
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" href="themes/my-costum-theme.min.css" />
        <link rel="stylesheet" href="themes/jquery.mobile.icons.min.css" />
        <script src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
        <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>    
        <!-- Einstellungen zur Defintion als WebApp -->
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <script src="loadagain.js"></script>    
        <script>
        $(document).ready(function () {
            $('#myform').validate({ // initialize the plugin
                rules: {
                    username: {
                        required: true,
                        minlength: 2,
                        maxlength: 30
                    },
                    password: {
                        required: true,
                        minlength: 3,
                        maxlength: 30
                    }
                },
                submitHandler: function (form) { // for demo
                    $.ajax({
        type: 'post',
        url: 'loginprivate.php'    //url where you want to post the stuff.
        data:{
            username: 'root',
            password: ''
        },
        success: function(res){
            //here you will get res as response from php page, either logged in or some error.
             window.location.href = "http://localhost/loc/main.php";
        }
    });
                    return false; // for demo
                }
            });
        });
        </script>   
        </head>
        <body>
        <div class="ui-page" data-theme="b" data-role="page">
            <div data-role="header"><h1>localcorps</h1></div>
                <div id="wrapper1" style=" width: 90%; padding-right:5%; padding-left:5%" name="wrapper1">
                    <form  name="login-form" id="myform" class="login-form" action="./loginprivate.php" method="post">
                        <div class="header1"></div>
                            <div class="content1">
                                <div data-role="fieldcontain">
                                <label for="username">Username:</label>
                                <input name="username" type="text" class="input username" id="username"/>
                            </div>
                        </div>
                        <div data-role="fieldcontain">
                            <label for="password">Password:</label>
                            <input name="password" type="password" class="input password" id="password"/>          
                        </div>
                        <div class="footer">
                            <input type="submit" name="submit" value="Login" class="button"/>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        </body>

我的PHP代码：

    if(isset($_POST["submit"]))
    {
            $hostname='localhost';
            $username='root';
            $password='';

            unset($_POST['password']);
            $salt = ''; 
            for ($i = 0; $i < 22; $i++) { 
                    $salt .= substr('./ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789', mt_rand(0, 63), 1); 
            }
            $_POST['password'] = crypt($_POST['password'],'$2a$10$'.$salt);
            $new = 0;
            try {
                    $dbh = new PDO("mysql:host=$hostname;dbname=search",$username,$password);
                    $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION); // <== add this line
                    $sql = "INSERT INTO users (username, password)
                    VALUES ('".$_POST["username"]."','".$_POST["password"]."')";
                    if ($dbh->query($sql)) {
                            echo "New Record Inserted Successfully";
                    }
                    else{
                            echo "Data not successfully Inserted.";
                    }
                    $new = $dbh->lastInsertId();
                    $dbh = null;
            }
            catch(PDOException $e)
            {
                    echo $e->getMessage();
            }
            if ($new > 0) 
            {

                $t = time() + 60 * 60 * 24 * 1000;
                setcookie("username", $_POST['username'], $t);
                setcookie("userid", $new , $t);
            } 
        else
            {

            }
    }

Answer 1

所以，请使用ajax

中的内置函数更新validate()来电

<script>
    $(document).ready(function () {
        $('#myform').validate({ // initialize the plugin
            rules: {
                username: {
                    required: true,
                    minlength: 2,
                    maxlength: 30
                },
                password: {
                    required: true,
                    minlength: 3,
                    maxlength: 30
                }
            },
            submitHandler: function (form) {               
                // do other things for a valid form
                form.submit();     //will submit your form.
                return false; // disables default submit.
            }
        });
    });
</script>

了解更多信息 HERE ，并特别关注示例2和3 。

表单验证规则将被忽略

1 个答案: