立即使用Laravel和VueJS设置Ajax验证

与现在一样,使用Laravel在您的应用程序中实现表单验证从未如此简单。 您所需要做的就是从控制器中调用$ this-> validate($ request,[])并向其提供要验证的规则。

但是有时候我们想使用Ajax验证,这样我们就可以验证表单而无需重新加载页面。 通常,对应用程序中的每种表单执行此操作并不令人兴奋。 您的代码很快就会变得混乱,并且感觉不太好。

由于这是一项可重复的任务,我认为找到一种易于设置和使用的方法将非常有帮助。

最近,VueJS是我要完成的每个前端任务的主要选择。 这就是我们将在本教程中使用的内容。 如果您是新手,请不要担心。 很容易学习。 即使您以前从未使用过它,也可以轻松地阅读本教程。

在学习完本教程之后,您只需添加几个字符就可以使用所需的任何形式的Ajax验证!

注册路线

首先,我们在route文件中注册两个端点-我在这里处理的是Laravel 5.2的全新安装。

一种方法是显示用于创建新文章的表单(这将是我们的示例)。 另一种是接受请求并进行验证,然后创建文章。

Route::group(['middleware' => ['web']], function () { Route::get('/article/create', 'ArticleController@showArticleCreationForm'); Route::post('/article', 'ArticleController@publish'); }); 

这是两者的初始实现(在ArticleController中 )。

 public function showArticleCreationForm() { return view('article.create'); } public function publish(Request $request) { $this->validate($request, [ 'title' => 'required|min:3', 'body' => 'required|min:10' ]); return 'publish'; } 

创建视图