Using Vue.js in Laravel to implement Ajax form submission error verification operation

This tutorial is based on Laravel 5.4

Before starting, first prepare the development environment. We assume that you have installed Laravel. As for the introduction of Vue, please refer to the official documentation. After completing the above preparations, we can start our development. In this tutorial, we will demonstrate the form verification of the article publishing page. This article mainly introduces you to the use of Vue.js in Laravel to implement the Ajax-based form submission error verification function. It is very good and has reference value. Friends who need it can refer to it. I hope it can help everyone.

First add two routing rules in routes/web.php:

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

Then run the Artisan command in the project root directory to create Controller PostController:

php artisan make:controller PostController

Add two methods in the generated controller to handle routing requests:

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

The next step is to create a responsive view. In order to reuse the existing styles and page layouts, we first run the following Artisan command:

php artisan make:auth

In this way we You can reuse the authentication function page layout that comes with Laravel. Create the view file post/create.blade.php and edit the file content as follows:

@extends('layouts.app')
@section('content')
  <p class="container">
    <!--创建成功显示消息-->
    <p class="alert alert-success" v-if="submitted">
      创建成功!
    </p>
    <!--页面提交之后阻止刷新-->
    <form @submit.prevent="createPost" method="POST">
      <legend>创建文章</legend>
      <!--如果title字段验证失败则添加.has-error-->
      <p 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>
      </p>
      <!--如果body字段验证失败则添加.has-error-->
      <p 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>
      </p>
      <button type="submit" class="btn btn-primary">创建文章</button>
    </form>
  </p>
@endsection

Then visit the page The page is empty because we have not defined Vue-related data variables. The layouts.app layout view references app.js, and this js is compiled from resources/assets/js/app.js, so we are ready to define it here. Vue related code:

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;
      });
    }
  }
});

We also saw form-error in the view file. This is actually a sub-component in Vue. We can find it in resources/assets/js Create this new component file in the /components directory. A sample Example.vue is provided in this directory. We can refer to this example to write a new FormError.vue:

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

Here we pass the data errors in the parent component to the child component to display error information in the child component. After you finish creating the subcomponent, don’t forget to introduce it in the above resources/assets/js/app.js:

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

In this way, we have completed all the coding work, and then Run the following command to recompile js:

npm run dev

Of course in the development environment, we prefer to use npm run watch , which will monitor the front end Changes to resource files are then recompiled to avoid manual compilation after each modification.

In this way, when you access the post/create page in the browser, it will be displayed normally:

Fill in nothing, click the create button, and the page will be The error message can be displayed:

After filling in the corresponding fields and then submitting, it will prompt that the creation is successful:

This way , we have completed a simple Ajax form submission verification function based on Vue in Laravel. Personally, I feel that it has significantly improved development efficiency.

Related recommendations:

Sharing of ajax form verification methods in TP framework

Ajax form asynchronous upload file example code detailed explanation

Using Vue.js in Laravel to implement Ajax form validation example

The above is the detailed content of Using Vue.js in Laravel to implement Ajax form submission error verification operation. For more information, please follow other related articles on the PHP Chinese website!