首頁 > 後端開發 > php教程 > Laravel中使用Vue.js實作Ajax表單提交錯誤驗證操作

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

小云云
發布: 2023-03-20 08:14:01
原創
1487 人瀏覽過

本教學基於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="{&#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
登入後複製

這時存取頁面頁面為空,因為我們還沒有定義Vue 相關的資料變量, layouts.app 佈局視圖裡引用了app.js ,而這個js 由resources/assets/js/app.js 編譯而來,所以我們準備在這裡定義Vue 相關的程式碼:


var app = new Vue({
  el: &#39;#app&#39;,
  data: {
    post: {
      title: &#39;&#39;,
      body: &#39;&#39;
    },
    errors: [],
    submitted: false
  },
  methods: {
    createPost: function () {
      var self = this;
      axios.post(&#39;/post/save&#39;, self.post).then(function(response) {
        // form submission successful, reset post data and set submitted to true
        self.post = {
          title: &#39;&#39;,
          body: &#39;&#39;,
        };
        // clear previous form errors
        self.errors = &#39;&#39;;
        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: [&#39;errors&#39;]
  }
</script>
登入後複製

這裡我們將父元件中的資料errors 傳遞到了子元件中以便在子元件中顯示錯誤訊息。完成創建子元件後不要忘了在上述resources/assets/js/app.js 中引入它:


Vue.component(&#39;form-error&#39;, require(&#39;./components/FormError.vue&#39;));
登入後複製

這樣,我們就完成了所有編碼工作,接下來執行以下指令重新編譯js:


npm run dev
登入後複製
當然在開發環境中,我們更傾向於使用

npm run watch ,該指令會監聽前端資源檔案的變更然後重新編譯,以避免每次修改後手動編譯。

這樣,在瀏覽器中造訪post/create 頁面,就可以正常展示了:

什麼都不填寫,點擊建立按鈕,頁面就能展示錯誤提示訊息了:

填寫對應欄位之後再提交,則提示建立成功:

這樣,我們在Laravel 中完成了簡單的,基於Vue 實現的Ajax 表單提交驗證功能,個人感覺在提升開發效率方面還是很顯著的。

相關推薦:

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

#Ajax表單非同步上傳檔案實例程式碼詳解

Laravel 中使用Vue.js 實作Ajax表單驗證實例

以上是Laravel中使用Vue.js實作Ajax表單提交錯誤驗證操作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板