标签分类 技术文章:
当前位置:首页 > PHP编程文章 > Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

Laravel中用Vue.js实现基于Ajax的表单提交错误验证实例内容

  • 发布时间:
  • 作者:码农之家原创
  • 点击:60

这篇文章主要知识点是关于vue.js实现表单验证、ajax、表单提交、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js实战
Vue.js实战高质量扫描版
  • 类型:Vue大小:196.7 MB格式:PDF出版:清华大学出版社作者:梁灏
立即下载

更多PHP相关的学习资源可以参阅 PHP电子书程序设计电子书 等栏目。

Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

本教程基于Laravel 5.4

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

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

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

Route::get('post/create', 'PostController@create');
Route::post('post/save', 'PostController@save');

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

php artisan make:controller PostController

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

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

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

php artisan make:auth

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

@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 相关的代码:

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 :

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

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

Vue.component('form-error', require('./components/FormError.vue'));

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

npm run dev

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

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

Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

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

Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

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

Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作

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

以上就是本次给大家分享的关于PHP的全部知识点内容总结,大家还可以在下方相关文章里找到PHP用户验证和标签推荐的、 PHP中的日期时间处理利器、 ThinkPHP的模板引擎如何达到、 等php文章进一步学习,感谢大家的阅读和支持。

上一篇:PHP中excel的导出和下载实例代码

下一篇:composer错误使用的问题与解决方法

展开 +

收起 -

学习笔记
网友NO.164324

laravel5.3 vue 实现收藏夹功能实例详解

下面通过本文给大家介绍laravel5.3 vue 实现收藏夹功能,具体代码如下所述: { "private": true, "scripts": { "prod": "gulp --production", "dev": "gulp watch" }, "devDependencies": { "bootstrap-sass": "^3.3.7", "gulp": "^3.9.1", "jquery": "^3.1.0", "laravel-elixir": "^6.0.0-14", "laravel-elixir-vue-2": "^0.2.0", "laravel-elixir-webpack-official": "^1.0.2", "lodash": "^4.16.2", "vue": "^2.0.1", "vue-resource": "^1.0.3" }} ​1.0.2 修改 gulpfile.js 将原来的 require('laravel-elixir-vue'); 修改为 require('laravel-elixir-vue-2'); ​ const elixir = require('laravel-elixir');​require('laravel-elixir-vue-2');​/* |-------------------------------------------------------------------------- | Elixir Asset Management |-------------------------------------------------------------------------- | | Elixir provides a clean, fluent API for defining some basic Gulp tasks | for your Laravel application. By default, we are compiling the Sass | file for our application, as well as publishing vendor resources. | */​elixir(mix = { mix.sass('app.scss') .webpack('app.js');}); 1.0.3 修改 resource/assets/js/app.js 将原来的 el: 'body' 改为 el: '#app' ​ const app = new Vue({ el: '#app'}); 1.1 安装npm 模块 (如果之前没有执行此操作) ​ npm install 1.2 创建模型及迁移 我们需要一个User模型(laravel附带),一个Post模型和一个Favorite模型以及它们各自的迁移文件。 因为我们之前创建过了 Post 的模型,……

网友NO.672552

laravel 中如何使用ajax和vue总结

最近写一个项目是基于laravel框架的,这个框架传言是为艺术而创作的优雅框架,简洁分明的风格,很吸引我,所以最近研究比较多。本次就是基于该框架然后将Vue插件加入实现一定的功能,vue插件本身强大,具体不说了,有兴趣的同学可以去官网https://cn.vuejs.org/。laravel 本身php页面是用blade引擎,渲染数据格式: {{msg}} 但是熟悉Vue渲染的同学知道Vue的格式是: div id="app" {{ message }}/div 这样就引起了冲突,因此,可以是 @{{msg}} 使用@跳出blade引擎模式。 以下代码摘自是laravel-china@leo作者 tr v-for="item in services" td@{{ item.id }}/td td@{{ item.name }}/td td@{{{ displayHosts(item.hosts) }}}/td td@{{{ bool2icon(item.enabled) }}}/td td@{{{ bool2icon(item.allow_proxy) }}}/td td@{{ item.created_at }}/td td a href="javascript:void(0)" rel="external nofollow" @click="edit(item)"{{ trans('admin.edit') }}/a /td/tr 以下是本人自己写的代码: li class="wrap" v-for="(course,index) in courses.data" div class="img" a v-on:click="show(course)" img v-bind:src="course.thumblink" width="236" height="124" /a /div div class="coursetitle" @{{course.name}} /div div class="lecturer" 讲师:@{{course.teachername}} 学期:@{{course.semester}} /div div class="price" @{{course.price}}元 /div div class="pull-left" button type="button" class="btn btn-success btn-xs" v-on:click="show(course)"详情/button /div 有时候我们可能向带有链接……

<
1
>

Copyright 2018-2019 xz577.com 码农之家

版权责任说明