首页 > php框架 > Laravel > 正文

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

不言
发布: 2018-07-31 14:00:31
原创
2542人浏览过

本篇文章给大家分享的内容是关于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 命令:

1

php artisan make:auth

登录后复制

这样我们就可以复用 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) {

                // form submission successful, reset post data and set submitted to true

                self.post = {

                    title: '',

                    body: '',

                };

                // clear previous form errors

                self.errors = '';

                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:

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:

1

npm run dev

登录后复制

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

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

14987943320225.jpg

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

14987943736983.jpg

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

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

相关推荐:

laravel的新特性之高阶消息传递

Laravel 5.1框架中的ACL用户授权和权限检查功能的实现

以上就是laravel5.4框架中vue.js实现Ajax的表单提交错误验证的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号