laravel5.4フレームワークのVue.jsはAjaxフォーム送信エラー検証を実装します

この記事の内容は、laravel5.4 フレームワークの vue.js によって実装された Ajax フォーム送信エラー検証について共有することです。これは一定の参考価値があり、困っている友人に役立つことを願っています。

始める前に、まず開発環境を準備します。Vue の導入については、公式ドキュメントを参照してください。

上記の準備が完了したら、開発を開始できます。このチュートリアルでは、記事公開ページのフォーム検証をデモンストレーションします。

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

Layouts.app レイアウト ビュー アプリで参照される Vue 関連のデータ変数を定義していないため、この時点でアクセスしたページは空です。 .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;
            });
        }
    }
});

ビュー ファイルにも form-error が表示されています。これは実際にはこれです。 Vue のサブコンポーネント。この新しいコンポーネント ファイルは、resources/assets/js/components ディレクトリに作成できます。このサンプルを参照して、新しい FormError:

<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

もちろん、開発環境では、このコマンドはフロントエンドリソースファイルの変更を監視し、変更のたびに手動でコンパイルすることを避けるために再コンパイルします。

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

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

対応するフィールドに入力します。後でフィールドを送信すると、作成が成功したことを示すメッセージが表示されます。

このようにして、Laravel で Vue をベースにした簡単な Ajax フォーム送信検証機能が完成しました。個人的には開発効率が大幅に向上したと感じています

関連する推奨事項:

Laravel の新機能: 高レベルのメッセージの配信

Laravel 5.1フレームワークでのACLユーザー認証および権限チェック機能の実装

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