本篇文章给大家分享的内容是关于laravel5.4框架中vue.js实现ajax的表单提交错误验证,有一定的参考价值,希望可以帮助到有需要的朋友。
开始之前首先准备好开发环境,我们假设你已经安装好 Laravel,至于 Vue 的引入,请参考官方文档。
做好上述准备工作后就可以开始我们的开发了,本教程中我们将演示文章发布页面的表单验证。
首先在 routes/web.php 中新增两条路由规则:
1 2 | Route::get( 'post/create' , 'PostController@create' );
Route::post( 'post/save' , 'PostController@save' );
|
登录后复制
然后在项目根目录下运行 Artisan 命令创建控制器 PostController:
立即学习“前端免费学习笔记(深入)”;
1 | php artisan make:controller PostController
|
登录后复制
在生成的控制器中新增两个方法用于处理路由请求:
1 2 3 4 5 6 7 8 9 10 | public function create() {
return view( 'post.create' );
}
public function save(Request $request ) {
$this ->validate( $request , [
'title' => 'required' ,
'body' => 'required'
]);
}
|
登录后复制
接下来就要创建响应视图了,为了复用已有的样式风格和页面布局,我们先运行如下 Artisan 命令:
这样我们就可以复用 Laravel 自带的认证功能页面布局了,创建视图文件 post/create.blade.php,并编辑文件内容如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 | @ extends ( 'layouts.app' )
@section( 'content' )
<div class = "container" >
<!--创建成功显示消息-->
<div class = "alert alert-success" v- if = "submitted" >
创建成功!
</div>
<!--页面提交之后阻止刷新-->
<form @submit.prevent= "createPost" method= "POST" >
<legend>创建文章</legend>
<!--如果title字段验证失败则添加.has-error-->
<div class = "form-group" : class = "{'has-error':errors.title}" >
<label>文章标题</label>
<input type= "text" name= "title" class = "form-control" v-model= "post.title" value= "{{ old('title') }}" >
<!--如果验证失败通过FormError组件显示错误信息-->
<form-error v- if = "errors.title" :errors= "errors" >
@{{errors.title.join( ',' )}}
</form-error>
</div>
<!--如果body字段验证失败则添加.has-error-->
<div class = "form-group" : class = "{'has-error':errors.body}" >
<label>文章正文</label>
<textarea name= "body" class = "form-control" rows= "5" v-model= "post.body" >{{ old( 'body' ) }}</textarea>
<!--如果验证失败通过FormError组件显示错误信息-->
<form-error v- if = "errors.body" :errors= "errors" >
@{{errors.body.join( ',' )}}
</form-error>
</div>
<button type= "submit" class = "btn btn-primary" >创建文章</button>
</form>
</div>
@endsection
|
登录后复制
这时访问页面页面为空,因为我们还没有定义 Vue 相关的数据变量,layouts.app 布局视图里引用了 app.js,而这个 js 由 resources/assets/js/app.js 编译而来,所以我们准备在这里定义 Vue 相关的代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | var app = new Vue({
el: '#app' ,
data: {
post: {
title: '' ,
body: ''
},
errors: [],
submitted: false
},
methods: {
createPost: function () {
var self = this;
axios.post( '/post/save' , self.post).then( function (response) {
self.post = {
title: '' ,
body: '' ,
};
self.errors = '' ;
self.submitted = true;
}). catch ( function (error) {
self.errors = error.response.data;
});
}
}
});
|
登录后复制
我们在视图文件里还看到了 form-error,这其实是 Vue 里面的子组件,我们可以在 resources/assets/js/components 目录下创建这个新的组件文件,该目录下提供了一个样例 Example.vue,我们可以参照该样例编写一个新的 FormError.vue:
1 2 3 4 5 6 7 8 9 10 | <template>
<span class = "help-block" >
<slot></slot>
</span>
</template>
<script>
export default {
props: [ 'errors' ]
}
</script>
|
登录后复制
这里我们将父组件中的数据 errors 传递到了子组件中以便在子组件中显示错误信息。完成创建子组件后不要忘了在上述 resources/assets/js/app.js 中引入它:
1 | Vue.component( 'form-error' , require ( './components/FormError.vue' ));
|
登录后复制
这样,我们就完成了所有编码工作,接下来运行以下命令重新编译js:
当然在开发环境中,我们更倾向于使用 npm run watch,该命令会监听前端资源文件的更改然后重新编译,以避免每次修改后手动编译。
这样,在浏览器中访问 post/create 页面,就可以正常展示了:

什么都不填写,点击创建按钮,页面就能展示错误提示信息了:

填写相应字段之后再提交,则提示创建成功。
这样,我们在 Laravel 中完成了简单的,基于 Vue 实现的 Ajax 表单提交验证功能,个人感觉在提升开发效率方面还是很显著的
相关推荐:
laravel的新特性之高阶消息传递
Laravel 5.1框架中的ACL用户授权和权限检查功能的实现
以上就是laravel5.4框架中vue.js实现Ajax的表单提交错误验证的详细内容,更多请关注php中文网其它相关文章!