Laravel 5：使用 Javascript 验证表单的最佳方式

Question

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

Answer 1

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

您可以选择一个 Javascript 框架，例如 Angularjs、emberjs 等，它们将内置验证。
或者，如果您使用 jQuery，您可以使用任何 jquery 验证插件，这里有一些：

如果您正在使用 bootstrap，那么您可以使用 http://1000hz.github.io/bootstrap-validator/

Answer 2

您可以使用包 Laravel 5 Javascript Validation. This package enables transparent Javascript Valditaion in your views based on JQuery Validation Plugin

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

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
    }
}

在视图中，您只需打印传递给视图的 validator 对象。记住这个包依赖于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 !!}

Answer 3

Laravel 5 Javascript 验证暂时不适用于 Laravel 5.3。你会得到一个 "Method [getFiles] does not exist." 错误，你可以按照这个问题 https://github.com/proengsoft/laravel-jsvalidation/issues/190

来解决它

它也不适用于数组验证，因为它是 Laravel 5.3

中的新功能

Answer 4

当我使用 Laravel 时，我使用 Vue.js 并且对客户端验证非常满意。
您也可以使用其他东西，只是不要使用 jQuery（不再），我强烈反对它。

Laravel 5：使用 Javascript 验证表单的最佳方式

Laravel 5: Best way to validate form with Javascript

laravel

laravel-5