laravel5.4框架中vue.js实现Ajax的表单提交错误验证-Laravel-PHP中文网

laravel5.4框架中vue.js实现Ajax的表单提交错误验证

不言

发布： 2018-07-31 14:00:31

原创

2128人浏览过

本篇文章给大家分享的内容是关于laravel5.4框架中vue.js实现ajax的表单提交错误验证，有一定的参考价值，希望可以帮助到有需要的朋友。

开始之前首先准备好开发环境，我们假设你已经安装好 Laravel，至于 Vue 的引入，请参考官方文档。

做好上述准备工作后就可以开始我们的开发了，本教程中我们将演示文章发布页面的表单验证。

首先在 routes/web.php 中新增两条路由规则：

Route::get(&#39;post/create&#39;, &#39;PostController@create&#39;);
Route::post(&#39;post/save&#39;, &#39;PostController@save&#39;);

登录后复制

然后在项目根目录下运行 Artisan 命令创建控制器 PostController：

php artisan make:controller PostController

登录后复制

在生成的控制器中新增两个方法用于处理路由请求：

public function create() {
    return view(&#39;post.create&#39;);
}
public function save(Request $request) {
    // 设置验证规则
    $this->validate($request, [
         &#39;title&#39; => &#39;required&#39;,
         &#39;body&#39;  => &#39;required&#39;
     ]);
}

登录后复制

接下来就要创建响应视图了，为了复用已有的样式风格和页面布局，我们先运行如下 Artisan 命令：

php artisan make:auth

登录后复制

这样我们就可以复用 Laravel 自带的认证功能页面布局了，创建视图文件 post/create.blade.php，并编辑文件内容如下：

@extends(&#39;layouts.app&#39;)
@section(&#39;content&#39;)
    <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="{&#39;has-error&#39;:errors.title}">
                <label>文章标题</label>
                <input type="text" name="title" class="form-control" v-model="post.title" value="{{ old(&#39;title&#39;) }}">
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.title" :errors="errors">
                    @{{errors.title.join(&#39;,&#39;)}}
                </form-error>
            </div>
            <!--如果body字段验证失败则添加.has-error-->
            <div class="form-group" :class="{&#39;has-error&#39;:errors.body}">
                <label>文章正文</label>
                <textarea name="body" class="form-control" rows="5" v-model="post.body">{{ old(&#39;body&#39;) }}</textarea>
                <!--如果验证失败通过FormError组件显示错误信息-->
                <form-error v-if="errors.body" :errors="errors">
                    @{{errors.body.join(&#39;,&#39;)}}
                </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 相关的代码：

var app = new Vue({
    el: &#39;#app&#39;,
    data: {
        post: {
            title: &#39;&#39;,
            body: &#39;&#39;
        },
        errors: [],
        submitted: false
    },
    methods: {
        createPost: function () {
            var self = this;
            axios.post(&#39;/post/save&#39;, self.post).then(function(response) {
                // form submission successful, reset post data and set submitted to true
                self.post = {
                    title: &#39;&#39;,
                    body: &#39;&#39;,
                };
                // clear previous form errors
                self.errors = &#39;&#39;;
                self.submitted = true;
            }).catch(function (error) {
                // form submission failed, pass form  errors to errors array
                self.errors = error.response.data;
            });
        }
    }
});

登录后复制

我们在视图文件里还看到了 form-error，这其实是 Vue 里面的子组件，我们可以在 resources/assets/js/components 目录下创建这个新的组件文件，该目录下提供了一个样例 Example.vue，我们可以参照该样例编写一个新的 FormError.vue：

<template>
    <span class="help-block">
        <slot></slot>
    </span>
</template>
<script>
    export default {
        props: [&#39;errors&#39;]
    }
</script>

登录后复制

这里我们将父组件中的数据 errors 传递到了子组件中以便在子组件中显示错误信息。完成创建子组件后不要忘了在上述 resources/assets/js/app.js 中引入它：

Vue.component(&#39;form-error&#39;, require(&#39;./components/FormError.vue&#39;));

登录后复制

这样，我们就完成了所有编码工作，接下来运行以下命令重新编译js：

npm run dev

登录后复制

当然在开发环境中，我们更倾向于使用 npm run watch，该命令会监听前端资源文件的更改然后重新编译，以避免每次修改后手动编译。

这样，在浏览器中访问 post/create 页面，就可以正常展示了：

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

填写相应字段之后再提交，则提示创建成功。

这样，我们在 Laravel 中完成了简单的，基于 Vue 实现的 Ajax 表单提交验证功能，个人感觉在提升开发效率方面还是很显著的

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

laravel5.4框架中vue.js实现Ajax的表单提交错误验证