Question

我有一个登录表单，我试图弄清楚如何通过我的jQuery验证验证它，以及将它与ajax一起提交给我的LoginController中的进程函数。我不知道为了实现这一点我需要做什么，因为需要一条路线。

<?php
Route::get('login', array('uses' => 'LoginController@index'));
Route::post('login', array('uses' => 'LoginController@process'));

?>

<?php

class LoginController extends \BaseController {

    /**
    * Display the login form for a user to log into.
    *
    * @return Response
    */
    public function index()
    {
        // Display login form.
        return View::make('login');
    }

    /**
    * Process the login from the user.
    *
    * @return Response
    */
    public function process()
    {
        /*
        //return 'This is the process function for the login controller.';
        $rules = array(
           'email' => 'required|email',
           'password' => 'required|alphaNum|min:3'
        );

        $validator = Validator::make(Input::all(), $rules);

        // if the validator fails, redirect back to the form
        if ($validator->fails()) {
            return Redirect::to('login')->withErrors($validator)->withInput(Input::except('password'));
        } else {
            // validation passed continue to validate post data.
            return 'validation passed';
        }

        */
        return Response::json(array('name' => 'Steve', 'state' => 'CA'));
     }
}

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Chain Responsive Bootstrap3 Admin</title>

    <link href="assets/css/style.default.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
    <script src="assets/js/html5shiv.js"></script>
    <script src="assets/js/respond.min.js"></script>
    <![endif]-->
</head>

<body class="signin">


    <section>

        <div class="panel panel-signin">
            <div class="panel-body">
                <div class="logo text-center">
                    <img src="assets/images/logo-primary.png" alt="Chain Logo">
                </div>
                <br/>
                <h4 class="text-center mb5">Already a Member?</h4>

                <p class="text-center">Sign in to your account</p>

                <div class="mb30"></div>

                {{ Form::open(array('url' => 'login', 'id' => 'loginForm')) }}

                    <div class="input-group mb15">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-user"></i></span>
                        {{ Form::text('email_address', Input::old('email_address'), array('placeholder' => 'Email Address', 'class' => 'form-control')) }}
                    </div>

                    <!-- input-group -->
                    <div class="input-group mb15">
                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                        {{ Form::password('password', array('placeholder' => 'Password', 'class' => 'form-control')) }}
                    </div>
                    <!-- input-group -->

                    <div class="clearfix">
                        <div class="pull-left">
                            <div class="ckbox ckbox-primary mt10">
                                <input type="checkbox" id="rememberMe" value="1" name="rememberMe">
                                <label for="rememberMe">Remember Me</label>
                            </div>
                        </div>

                        <div class="pull-right">
                            <button type="submit" class="btn btn-success">Sign In <i class="fa fa-angle-right ml5"></i>
                            </button>
                        </div>
                    </div>

                {{ Form::close() }}

            </div>
            <!-- panel-body -->
            <div class="panel-footer">
                <a href="signup" class="btn btn-primary btn-block">Not yet a Member? Create Account Now</a>
            </div>
            <!-- panel-footer -->
        </div>
        <!-- panel -->

    </section>

    <script src="assets/js/jquery-1.11.1.min.js"></script>
    <script src="assets/js/jquery-migrate-1.2.1.min.js"></script>
    <script src="assets/js/jquery-ui-1.10.3.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/modernizr.min.js"></script>
    <script src="assets/js/pace.min.js"></script>
    <script src="assets/js/retina.min.js"></script>
    <script src="assets/js/jquery.cookies.js"></script>
    <script src="assets/js/jquery.validate.min.js"></script>

    <script src="assets/js/custom.js"></script>

    <script>
        $(document).ready(function(){
            // validate the login form from user input.
            $("#loginForm").validate({
                debug: true,
                submitHandler: function(form) {
                    $.ajax({
                        type: "POST",
                        url: 'login/process',
                        data: $("#loginForm").serialize(),
                        dataType: 'json',
                        success: function(data)
                        {
                           alert(data);
                        }
                     });

                    return false;
                }
            });
        });
    </script>

</body>
</html>

使用jQuery Ajax提交Laravel登录表单

0 个答案: