Vue.jsを使用してさまざまなフォームを簡単に実装できる -Vue Formulate

Vue.jsを使用して、Webページやスマホアプリでよく使用されるフォームを簡単に実装できるVue Formulateを紹介します。

サインアップ、ログイン、メールアドレス、ファイルのアップロード、アンケートなど、さまざまなフォームをサポートしており、バリデーション機能も備えています。

サイトのキャプチャ

Vue Formulate
Vue Formulate -GitHub

Vue Formulateの特徴

Vue Formulateは、Vue.jsを使用してフォームを構築する最も簡単な方法です。主な機能は、フォームとフィールドの検証、ファイルのアップロード、フォームの生成、ラベルをサポートする単一要素の入力、ヘルプテキスト、エラーメッセージ、プレースホルダーなど、さまざまなプロジェクトで使用するための包括的なドキュメントが含まれています。

Vue Formulateの特徴
  • 単一のコンポーネントで任意のinput要素を作成。
  • フィールドおよびフォーム全体でv-modelバインディングを使用。
  • 単一のオブジェクトからフォーム全体を再作成。
  • jsonを使用してフォームを生成。
  • フィールドラベル・ヘルプテキストの追加。
  • フォームのバリデーション機能。
  • バリデーションのメッセージ・ルールのカスタマイズ。
  • MITライセンス

Vue Formulateのデモ

Vue Formulateで実装されたさまざまなフォームをオンラインで試せます。

サイトのキャプチャ

Live Code Examples -Vue Formulate

サイトのキャプチャ

Live Code Examples -Vue Formulate

Vue Formulateの使い方

基本となるコードは、下記の通りです。

フォームの入力項目を作成するにはFormulateInput要素を使用し、オプションで定義します。単一のFormulateForm要素内に複数のFormulateInput要素を配置すると、フォーム全体をv-model化できます。

Vue Formulateの使い方は、ドキュメントが用意されています。

サイトのキャプチャ

Guide -Vue Formulate

フォームのさまざまな入力要素・タイプごとに実装コードも掲載されています。

サイトのキャプチャ

Forms -Guide -Vue Formulate

sponsors

top of page

©2020 coliss