Laravel 5:使用Javascript验证表单的最佳方法

时间:2015-02-27 10:05:37

标签: laravel laravel-5

我想在Laravel的客户端验证表单。它有什么简单的方法吗?

4 个答案:

答案 0 :(得分:13)

您可以使用包Laravel 5 Javascript Validation。此程序包可根据JQuery Validation Plugin

在您的视图中启用透明的Javascript Valditaion

这是如何在控制器中重用验证规则的基本示例。

<强> PostController.php

namespace App\Http\Controllers;

class PostController extends Controller {

    /**
     * Define your validation rules in a property in 
     * the controller to reuse the rules.
     */
    protected $validationRules=[
                'title' => 'required|unique|max:255',
                'body' => 'required'
    ];

    /**
     * Show the edit form for blog post
     * We create a JsValidator instance based on shared validation rules
     * @param  string  $post_id
     * @return Response
     */
    public function edit($post_id)
    {
        $validator = JsValidator::make($this->validationRules);
        $post = Post::find($post_id);

        return view('edit_post')->with([
            'validator' => $validator,
            'post' => $post
        ]);
    }

    /**
     * Store the incoming blog post.
     * @param  Request  $request
     * @return Response
     */
    public function store(Request $request)
    {
        $v = Validator::make($request->all(), $this->validationRules]);

        if ($v->fails())
        {
            return redirect()->back()->withErrors($v->errors());
        }

        // do store stuff
    }
}

在视图中,您只需打印传递给视图的验证器对象。 记住这个包依赖于JQuery和 你必须在 jsvalidation.js

之前加入

<强> edit_post.blade.php

 <div class="container">
     <div class="row">
         <div class="col-md-10 col-md-offset-1">
             <form class="form-horizontal" role="form" method="POST" action="" id="ddd">
                 <div class="form-group">
                     <label class="col-md-4 control-label">Title</label>
                     <div class="col-md-6">
                         <input type="text" class="form-control" name="title">
                     </div>
                 </div>
                 <div class="form-group">
                     <label class="col-md-4 control-label">Array</label>
                     <div class="col-md-6">
                         <textarea name="body"></textarea>
                     </div>
                 </div>
             </form>
         </div>
     </div>
 </div>
 <!-- Scripts -->
 <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min.js"></script>

 <!-- Laravel Javascript Validation -->
 <script type="text/javascript" src="{{ asset('vendor/jsvalidation/js/jsvalidation.js')}}"></script>
 {!! $validator !!}

答案 1 :(得分:1)

正如评论中所讨论的那样,由于Laravel是一个后端框架,因此它不会提供client side validation开箱即用。
它不应该。

您可以选择一个Javascript框架,例如Angularjs,emberjs等,它们将进行验证。
或者如果你使用的是jQuery,你可以使用任何jquery验证插件,这里有几个:

如果您使用的是bootstrap,则可以使用http://1000hz.github.io/bootstrap-validator/

答案 2 :(得分:0)

Laravel 5 Javascript验证目前不适用于Laravel 5.3。您将获得“方法[getFiles]不存在”。错误,您可以按照此问题https://github.com/proengsoft/laravel-jsvalidation/issues/190

进行排序

它也不适用于阵列验证,因为它是Laravel 5.3中的新功能

答案 3 :(得分:0)

与Laravel一起工作时,我使用 Vue.js ,因此对客户端验证感到非常满意。
您还可以使用其他东西,只是不再使用jQuery(我强烈建议不要这样做)。