JQUERY AJAX laravel 5.2用户名检查可用性

时间:2016-09-03 06:13:39

标签: jquery ajax laravel-5.2

我想在laravel 5.2的注册表单中查看同一页面中用户名的可用性。我将如何使用Jquery AJAX。我想检查现场是否输入了密钥。我只是个新手。请帮帮忙?

1 个答案:

答案 0 :(得分:1)

这是我的代码,

实际上我用laravel 4.2版本做了这个,但是在代码级别没有任何变化只是一个语法级别的变化就像laravel 5. *在刀片文件中使用{{}}括号当larvel 5使用{!!!}}

首先,您必须使用jquery验证方法验证您的for,您可以查看此link

这会让你更好地了解如何验证使用jquery验证,这很容易使用,只需要加载一个jquery和一些验证方法就可以了。

以下是我的观看文件:

<!-- Change the "src" attribute according to your installation path -->
<script src="vendor/jquery-validation/dist/jquery.validate.min.js"></script>
<form action="{{ URL::to('signup/create') }}" method="POST" class="signup-form" id='signup-form1' enctype="multipart/form-data">

                    <div class="container">
                        <div class="row form-div">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtMsg custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="email" placeholder="Email Address" name="email" id="regemail">
                                        </span> </span>
                                        <div class="clearfix"></div>
                                        <div class="erroremail register-error-block"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtTag custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="text" placeholder="Gamer Tag" name="gamertag" id="gamertag">
                                        </span> </span> 
                                        <div class="clearfix"></div>
                                        <div class="errortag register-error-block"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="Create-account-btn">
                        <button class="btn btn-skew btn-red" type="submit" name="register" id="register-btn"><span>Create Account</span></button>
                    </p>
                </form>

现在为此注册表单添加jquery验证

$("#signup-form1").validate({
                    errorElement : 'div',
                    errorLabelContainer: '.errorTxt',
                    ignore: [],
                    rules: {
                        email:{
                            required:true, 
                            email:true,
                            remote: {
                                url: "signup/checkemail",
                                type: "post",
                                data: {email: $("input[email='email']").val(), _token: $('input[name=_token]').val()},
                                dataFilter: function (data) {
                                    var json = JSON.parse(data);
                                    if (json.msg == "true") {
                                        return "\"" + "Email address already in use" + "\"";
                                    } else {
                                        return 'true';
                                    }
                                }
                            }
                        },
                        gamertag: {
                            required: true,
                            alphanumeric:true
                        },
                    },
                    messages: {
                        email: {
                            required: "Email address is required.",
                            email: "Please enter valid email address.",
                            remote: "Email address already in use!"
                        },
                        gamertag: {
                            required: "Gamer Tag is required.",
                            alphanumeric: "Gamer Tag must contain alphanumeric string."
                        }
                    },
                    errorPlacement: function(error, element) {
                        //$(element).closest('.skew').append()
                        if (element.attr("name") == "email" ) {
                            $(".erroremail").append(error);
                        }
                        else if (element.attr("name") == "gamertag" ) {
                            $(".errortag").append(error);
                        }
                        else {
                                  error.append($('.errorTxt span'));
                        }
                    },
                    invalidHandler: function (event, validator) { //display error alert on form submit       

                    },
                    highlight: function (element) { // hightlight error inputs
                        $(element).closest('.skew').addClass('has-error'); // set error class to the control group
                    },
                    unhighlight: function (element) { // revert the change done by hightlight
                        $(element).closest('.skew').removeClass('has-error'); // set error class to the control group
                    },
                    success: function (label) {
                        label.closest('.skew').removeClass('has-error'); // set success class to the control group
                    },
                    submitHandler: function(form) {
                        //console.log(form);
                        $("#signup-form1").submit();
                        // Adding a New Post
                    }
                });

在上面的脚本中如果您注意到我已经使用了remote: { }方法,那么如果给定的电子邮件存在于数据库中,它还会检查ajax调用。

并执行我在我的控制器中做了一些像这样的事情

这是我的控制器功能,用于检查电子邮件是否存在。

public function postCheckemail(){
      //$user = Register::where('email', Input::get('email'))->get();
      $user = DB::table('users')->where('email', Input::get('email'));
        if($user->count()) {
            return Response::json(array('msg' => 'true'));
        }
        return Response::json(array('msg' => 'false'));  
    }

将以json格式返回带有true和false的消息。

这是与ajax,

现在,如果你不想要这个jquery验证方法,那么你可以使用laravel本身提供的验证功能here

说这是查看文件

<form action="{{ URL::to('signup/create') }}" method="POST" class="signup-form" id='signup-form1' enctype="multipart/form-data">

                    <div class="container">
                        <div class="row form-div">
                            <div class="row">
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtMsg custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="email" placeholder="Email Address" name="email" id="regemail">
                                        </span> </span>
                                        <div class="clearfix"></div>
                                        <div class="erroremail register-error-block"></div>
                                    </div>
                                </div>
                                <div class="col-sm-6">
                                    <div class="form-group"> <span class="skew"><span class="inside"><span class="icon-mwtTag custum-font-icon"> </span></span></span> <span class="skew"> <span class="inside">
                                        <input type="text" placeholder="Gamer Tag" name="gamertag" id="gamertag">
                                        </span> </span> 
                                        <div class="clearfix"></div>
                                        <div class="errortag register-error-block"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="Create-account-btn">
                        <button class="btn btn-skew btn-red" type="submit" name="register" id="register-btn"><span>Create Account</span></button>
                    </p>
                </form>

这是控制器功能来验证它。

public function postCreate(){
        $validator = Validator::make(array(
                'email' => Input::get( 'email' ),
                'gamertag' => Input::get( 'gamertag' ),
            ),      
            array(              
                'email' => 'required|email|unique:users',
                'gamertag' => 'required|min:3'
            ));

            if ($validator->fails())
            {       
                $messages = $validator->messages()->first();            
                //return Redirect::to('signup')->with('error_message', $messages);
                $data['success'] = false;    
                $data['message'] = $messages;
            }
            else
            {           
                //Your insert Query here to store the data in database 
            }

            return Response::json($data);
    }

多数民众赞成!

如果你随时都在任何地方,请不要犹豫再问我。