Laravel で Vue.js を使用して Ajax フォーム送信エラー検証操作を実装する
- 小云云オリジナル
- 2018-02-10 11:20:191464ブラウズ
このチュートリアルは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="{'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 は 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: ['errors']
}
</script> ここでは、親コンポーネントのデータ エラーを子コンポーネントに渡し、子コンポーネントのエラー情報を表示します。サブコンポーネントの作成が完了したら、それを上記の resource/assets/js/app.js に忘れずに導入してください:
Vue.component('form-error', require('./components/FormError.vue'));このようにして、すべてのコーディング作業が完了したので、次のコマンドを実行します。 js を再コンパイルするコマンド:
npm run devもちろん、開発環境では、このコマンドは
を使用することを好みます。このコマンドは、フロントエンド リソース ファイルの変更をリッスンし、変更のたびに手動でコンパイルすることを回避します。 npm run watch
TP フレームワークでの Ajax フォーム検証メソッドの共有
Ajax フォームの非同期アップロード ファイルのサンプル コードの詳細な説明
Laravel で Vue.js を使用して Ajax フォーム検証を実装する例
以上がLaravel で Vue.js を使用して Ajax フォーム送信エラー検証操作を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。