Laravel中使用Vue.js實現Ajax表單提交錯誤驗證操作

本教程基於Laravel 5.4

開始之前首先準備好開發環境，我們假設你已經安裝好 Laravel，至於 Vue 的引入，請參考官方文檔。做好上述準備工作後就可以開始我們的開發了，本教程中我們將示範文章發佈頁面的表單 驗證 。本文主要和大家介紹了Laravel 中使用 Vue.js 實現基於 Ajax 的表單提交錯誤驗證功能，非常不錯，具有參考借鑒價值,需要的朋友可以參考下，希望能協助到大家。

首先在 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')  <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="{'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>      </p>      <!--如果body欄位驗證失敗則添加.has-error-->      <p 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>      </p>      <button type="submit" class="btn btn-primary">建立文章</button>    </form>  </p>@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 實現的Ajax 表單提交驗證功能，個人感覺在提升開發效率方面還是很顯著的。

相關推薦：

TP架構裡面的ajax表單驗證方法分享

Ajax表單非同步上傳檔案執行個體代碼詳解

Laravel 中使用 Vue.js 實現Ajax表單驗證執行個體