Using Vue.js in Laravel to implement AJAX form submission error validation operations

This tutorial is based on Laravel 5.4

Before starting the development environment, we assume that you have installed the Laravel, as for the introduction of Vue, please refer to the official documentation. With this preparation in place, we can begin our development, and we will demonstrate the form validation of the article publishing page in this tutorial. This article mainly and everyone introduces the use of laravel in the implementation of the Vue.js Ajax-based form submission error verification function, very good, with reference value, the need for friends can refer to, hope to help everyone.

First, two new routing rules are added in routes/web.php:

Route::get (' post/create ', ' postcontroller@create '); Route::p ost (' Post/save ', ' postcontroller@save ');

Then run the Artisan command under the project root to create the controller Postcontroller:

PHP Artisan Make:controller Postcontroller

There are two new methods to handle routing requests in the generated controller:

Public Function Create () {  return view (' Post.create ');} Public function Save (Request $request) {  //set validation rule  $this->validate ($request, [     ' title ' = ' Required ') ,     ' body ' = ' required '   );}

Next we create the response view, in order to reuse the existing style style and page layout, we first run the following Artisan command:

PHP Artisan Make:auth

This allows us to reuse Laravel's own authentication feature page layout, create the view file post/create.blade.php, and edit the file contents as follows:

@extends (' Layouts.app ') @section (' content ') <p class= "Container" > <!--Create a successful display message--<p class= "Alert Ale    Rt-success "v-if=" submitted "> Created successfully! </p> <!--the page is submitted to prevent the refresh-<form @submit. prevent= "Createpost" method= "POST" > <legend> Create article &L T;/legend> <!--If the title field fails validation, add .has-error--> <p class= "form-group": class= "{' Has-error ': errors.title } "> <label> article title </label> <input type=" text "name=" title "class=" Form-control "v-model=" post . title "Value=" {{old (' title ')}} "> <!--if validation fails by Formerror component display error message-<form-error v-if=" Errors.ti Tle ": errors=" Errors "> @{{errors.title.join (', ')}} </form-error> </p> <!--if Bo Dy Field validation failed add .has-error--> <p class= "form-group": class= "{' Has-error ': errors.body}" > <label> article Body & lt;/label> <textarea name= "Body" class= "Form-control" rows= "5" v-model= "Post.body" >{{old (' body ')}}</textarea> <!--if validation fails display error message via Formerror component--<form-error v-if= "Errors.body" : errors= "Errors" > @{{errors.body.join (', ')}} </form-error> </p> <button type= " Submit "class=" BTN btn-primary "> Create article </button> </form> </p> @endsection

At this time the Access page page is empty, because we have not defined the Vue related data variables, layouts.app layout view referenced app.js, and this JS compiled by Resources/assets/js/app.js, so we are going to define the Vue related The code:

var app = new Vue ({  el: ' #app ',  data: {    post: {      title: ',      body: '    },    errors: [],    Submitted:false  },  methods: {    createpost:function () {      var = 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.respons (E.data;});}}  );

We also see Form-error in the View file, which is actually a subcomponent inside the Vue, we can create this new component file under the Resources/assets/js/components directory, which provides a sample Example.vue, We can write a new Formerror.vue with reference to this example:

<template>  <span class= "Help-block" >    <slot></slot>  </span></ Template><script>  Export Default {    props: [' Errors ']  }</script>

Here we pass the data errors in the parent component to the child component to display the error message in the subassembly. When you're done creating subcomponents, don't forget to introduce it in the resources/assets/js/app.js above:

Vue.component (' Form-error ', require ('./components/formerror.vue '));

So we've done all the coding, and then we'll run the following command to recompile JS:

NPM Run Dev

Of course, in the development environment, we are more inclined to use npm run watch , the command will listen to the front-end resource file changes and then recompile, to avoid manual compilation after each modification.

In this way, access to the Post/create page in the browser can be displayed as normal:

Do not fill in anything, click the Create button, the page will be able to display the error message:

After filling in the appropriate fields and then submitting them, you are prompted to create the success:

In this way, we have completed a simple, Vue-based AJAX form submission validation function in Laravel, and the personal feel is significant in improving development efficiency.

Related recommendations:

Ajax form verification method sharing in TP framework

Ajax form Asynchronous upload file instance code detailed

Using Vue.js to implement AJAX form validation instances in Laravel