Laravel で Vue.js を使用して Ajax フォーム送信エラー検証操作を実装する

このチュートリアルはLaravel 5.4をベースにしています

始める前に、まず開発環境を準備してください。Vueの導入については、公式ドキュメントを参照してください。上記の準備が完了したら、開発を開始できます。このチュートリアルでは、記事公開ページのフォーム検証を示します。この記事では主に、Laravel での Vue.js を使用した Ajax ベースのフォーム送信エラー検証機能を紹介します。非常に優れており、必要な方は参考にしていただければ幸いです。

まず、routes/web.php に 2 つのルーティング ルールを追加します:

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

次に、プロジェクトのルート ディレクトリで Artisan コマンドを実行して、コントローラー PostController を作成します:

php artisan make:controller PostController

生成されたコントローラー内 2 つの新しいメソッドルーティング リクエストを処理するために追加されます:

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 は resource/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;
      });
    }
  }
});

また、ビュー ファイルでフォーム エラーが発生しました。これは、実際には 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>

ここでは、親コンポーネントのデータ エラーを子コンポーネントに渡し、子コンポーネントのエラー情報を表示します。サブコンポーネントの作成が完了したら、それを上記の resource/assets/js/app.js に忘れずに導入してください:

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

このようにして、すべてのコーディング作業が完了したので、次のコマンドを実行します。 js を再コンパイルするコマンド:

npm run dev

もちろん、開発環境では、このコマンドは

を使用することを好みます。このコマンドは、フロントエンド リソース ファイルの変更をリッスンし、変更のたびに手動でコンパイルすることを回避します。 npm run watch

このようにして、ブラウザで投稿/作成ページにアクセスすると、通常どおりに表示されます:

何も入力せずに作成ボタンをクリックすると、ページにエラー メッセージが表示されます:

対応するフィールドを再度送信すると、作成が成功したことを示すメッセージが表示されます:

このようにして、Laravel の Vue に基づいた簡単な Ajax フォーム送信検証関数が完成しました。開発効率が大幅に向上したと感じています。

関連する推奨事項:

TP フレームワークでの Ajax フォーム検証メソッドの共有

Ajax フォームの非同期アップロード ファイルのサンプル コードの詳細な説明

Laravel で Vue.js を使用して Ajax フォーム検証を実装する例

以上がLaravel で Vue.js を使用して Ajax フォーム送信エラー検証操作を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。