Vue.jsで実装された、サーバーサイドのバリデーションを自動表示するフォームのコンポーネント -FormVuelar

サイト構築 -JavaScript

Post on:2019年2月14日

FormVuelarの特徴

FormVuelarは、バックエンドから戻ってきたエラーを自動的に表示するように設計されたVue.jsのコンポーネントです。

Laravelによって返されるエラーメッセージをそのまま使用できます。
Axiosの統合。
検索機能付きselect要素。
チェックボックスのネスト。
進捗表示を含むファイルのアップロード。
画像プレビュー付きドロップゾーン。
エラーに対応したメッセージを表示。

FormVuelarのデモ

デモではベーシックなフォームをはじめ、セレクトボックス、チェックボックス、ファイルアップロード、ドロップゾーンを実際に試せます。

デモページ: Basic

デモページ: Prefilled

デモページ: Selects

デモページ: Checkbox

デモページ: Upload

デモページ: Dropzone

FormVuelarの使い方

インストール

NPM経由で当スクリプトをインストールします。

npm install formvuelar --save

1	npm install formvuelar --save

フォームのスタイル

フォームのスタイルは自由に定義できます。下記のコードでCSSをインポートできます。

@import '~formvuelar/dist/formvuelar.css';

1	@import '~formvuelar/dist/formvuelar.css';

フォームのテンプレート

フォームを作成し、postを使用してサーバーに送信します。

<!-- form wrapper -->
<fvl-form method="post" :data="form" url="/create">
  <!-- Text input component -->
  <fvl-input :value.sync="form.fullname" label="Full Name" name="fullname" />

  <!-- Textarea component -->
  <fvl-textarea :value.sync="form.bio" label="Bio" name="bio" />

  <!-- Radio component with options -->
  <fvl-radio :checked.sync="form.pet" :options="{'cat': 'Cat', 'dog': 'Dog'}" label="Favorite pet" name="pet" />

  <!-- Submit button -->
  <fvl-submit>Validate</fvl-submit>
</fvl-form>

<fvl-form method="post" :data="form" url="/create">

<fvl-input :value.sync="form.fullname" label="Full Name" name="fullname" />

<fvl-textarea :value.sync="form.bio" label="Bio" name="bio" />

<fvl-radio :checked.sync="form.pet" :options="{'cat': 'Cat', 'dog': 'Dog'}" label="Favorite pet" name="pet" />

<fvl-submit>Validate</fvl-submit>

</fvl-form>

上記のフォームコンポーネントに渡すフォームオブジェクトは、下記のようになります。

import { FvlForm, FvlInput, FvlTextarea, FvlRadio, FvlSubmit } from 'formvuelar'
//...
    components: {
        FvlForm,
        FvlInput,
        FvlTextarea,
        FvlRadio,
        FvlSubmit,
    },
    data() {
        return {
            form: {
                fullname: '',
                bio: '',
                pet: ''
            },
        //...