web-dev-qa-db-ja.com

JSON定義を使用してHTMLフォームを作成する方法

（JavaScript）フォームをJSON形式で保存できるようにするJavaScriptライブラリを探しています。クライアント側の検証入力に少しのインテリジェンスが組み込まれています。何かのようなもの：

function FormController(){
  this.user = {
    name: 'John Smith',
    address:{line1: '123 Main St.', city:'Anytown', state:'AA', Zip:'12345'},
    contacts:[{type:'phone', value:'1(234) 555-1212'}]
  };
  this.state = /^\w\w$/;
  this.Zip = /^\d\d\d\d\d$/;
}

（これは http://docs.angularjs.org/#!cookbook.form から取得されます）。正規表現を使用した基本的なクライアント側の検証を提供し、デフォルトを指定できるため、これはほぼ私が望んでいることですが、HTMLフォームを作成する必要があるようです。

定義だけが必要なものが欲しい。何か案は？

htmljsonvalidationformsdynamic
22
Ed_

恥知らずな自己宣伝では、私の jQuery.dFormプラグイン についても触れておきます。それはしばらくの間存在し、jQuery検証プラグイン、jQuery UIをサポートし、簡単に拡張できます。これはどのように見えるかです：

var formdata =
{
    "action" : "index.html",
    "method" : "get",
    "elements" : 
    [
        {
            "name" : "textfield",
            "caption" : "Label for textfield",
            "type" : "text",
            "value" : "Hello world"
        },
        {
            "type" : "submit",
            "value" : "Submit"
        }
    ]           
};
$("#myform").buildForm(formdata);

// Or to load the form definition via AJAX
$("#myform").buildForm("http://example.com/myform.json");
17
Daff

JSON Form の使用をお勧めします。

JSON Schema を受け取り、すぐにフォームを作成できます。さらに、フォームをさらにカスタマイズするためのオプションを提供します。例えば。：

$('#myform').jsonForm({
  schema: {
    name: {
      type: 'string',
      title: 'Name',
      required: true
    },
    age: {
      type: 'number',
      title: 'Age'
    }
  }
});

…＃myform要素に2つの入力を持つフォームを生成します。 （jQueryはオプションです。）

標準化された形式のJSONスキーマを使用すると、他の大きな利点と、データ定義を操作するためのツールが増えます。

10
fiddur

Jeremy SAngular Schema Form が優れていることに同意します。これは JSON Form と同じパターンに従っており、本番環境での使用を開始しており、非常によく機能しています。

また、拡張可能であり、ハイパースキーマ定義を読み取り、外部ソースから選択フィールドオプションを取得し、他の関連フィールドのデータを監視してから、そうするためのツールをすばやく作成しました。それを構築するのにたった1日しかかかりませんでした。拡張するのは本当に簡単で、Angularを利用しているので、私はそれを最良の選択肢として分類します。

Angularを使用していない場合、これらの2つのプロジェクトを使用するスキーマとフォームパターンが少し標準として浮上しているので、JSONフォームが私の推奨オプションです。エンタープライズサービス管理では、サービス管理用のほぼすべてのツールにデータモデルがあり、モデルを拡張するためのフォームデザイン管理コンポーネントがあるため、これは理にかなっています。

免責事項：私はこれを維持していませんAngularこれを書いたときにスキーマフォームです。

すでに気に入っていたので、1年後にプロジェクトのメンテナになりました。

5
Anthropic

アルパカをぜひチェックしてください： http://www.alpacajs.org

Bootstrap、jQueryUI、jQuery Mobile、またはストレートWebコントロールを使用して、JSONスキーマからHTMLフォームをレンダリングします。それは、コントロールの大規模なライブラリーとあらゆる種類の気の利いた機能を持っています。

Cloud CMS（ http://www.cloudcms.com ）で使用して、非常に直感的なUIをレンダリングします。

アルパカ自体は、Apache 2.0のライセンスが付与され、GitHub（ https://github.com/gitana/alpaca ）にあります。

次の1.5.0リリースでは、純粋なハンドルバーのサポートとカスタムgulpビルドが導入されています。かなりクールなもの。

4
Michael Uzquiano

Angularは、データをバインドしたい静的なhtmlを持っていると想定しているため、そのままでは問題を解決しません。

とはいえ、angularを使用して目的を達成することができます。 jsオブジェクトを受け取り、フォームDOMとすべてのangular検証属性を動的に作成する新しいタグ（角度ウィジェット）を作成できます。次に、フォームをangularのコンパイラでコンパイルし、ページに添付します。これにより、静的なhtmlと同じように機能する既存のAngularの検証機能とデータバインディング機能をすべて備えた動的に作成されたフォームになります。

Angular.widget apiを使用してこれを行うことができなくなるとは考えられませんが、それは簡単な作業ではありません。

データ構造について詳しく教えてください。フォームのセットだけがあり、適切なフォームを適切なタイミングで使用するだけでは十分ではないでしょうか。なぜ完全に動的でデータ駆動型のフォーム作成が必要なのですか？

更新：angularソリューションは https://groups.google.com/forum/#!topic/angular/f8KbLtT_Mqs にあります

3
Igor Minar

Metawidget をお勧めしますか？

任意の複雑なJSONオブジェクトからHTMLフォームを生成します。簡単なJavaScriptの例：

<!DOCTYPE HTML>
<html>
   <head>
      <script src="http://metawidget.org/js/4.0/metawidget-core.min.js"></script>
      <style>
         #metawidget {
            border: 1px solid #cccccc;
            width: 250px;
            border-radius: 10px;
            padding: 10px;
            margin: 50px auto;
         }
      </style>
   </head>
   <body>
      <div id="metawidget"></div>
      <script type="text/javascript">
         var mw = new metawidget.Metawidget( document.getElementById( 'metawidget' ));
         mw.toInspect = {
            firstname: 'Homer',
            surname: 'Simpson',
            age: 36
         };
         mw.buildWidgets();
      </script>
   </body>
</html>

以下もサポートします：

  • jSONスキーマまたはJSONスキーマまたはRESTサービスからのメタデータなどのメタデータの追加のソースでJSONオブジェクトを拡張する
  • jQuery UI、JQuery Mobile、AngularJSなどのフレームワーク
  • サードパーティのコンポーネントライブラリとバリデーター
  • プラグ可能なレイアウト
3
Richard Kennard

チェックアウト jQueryテンプレートプラグイン 。
少し前に、私は jQueryテンプレートを使用したクライアント側のデータバインディング に関する小さなブログ投稿を書きました。これはまさにあなたが探しているもののようです。

1
Kon

私はさまざまなアプリケーションでJeremy DornのJSONエディターを使用しており、常に満足しています。 JSONスキーマを使用し、フォーム生成にいくつかのオプションを追加します（特定のタイプのデータ構造にさまざまな入力があると考えられます）。

https://github.com/jdorn/json-editor

1
Fabio Beltramini

チェックアウト InputEx 、それはまさにあなたが望むもののようです。

JSONを使用してentireフォームを定義します。

// Create a schemaIdentifierMap 
var schemaIdentifierMap = {
 // Person definition
 "Person": {
    "id": "Person",
    "description":"A person",
    "type":"object",
    "properties": {
        "name": { "type":"string"},
        "born" : { "type":"string", "format":"date", "optional":true},
        "gender" : { "type":"string", "choices": [ {"value":"male","label":"Guy"}, {"value":"female","label":"Girl"} ]},
        "grownup": { "type": "boolean" },
        "favoritecolors": { "type": "array" },
        "address": { 
            "type":"object",
            "properties":{
                "street":{"type":"string"},
                "city":{"type":"string"},
                "state":{"type":"string"}
            }
        }
    }
 }
};

（ http://neyric.github.com/inputex/examples/json-schema.html から）

0
dakhota

brutusin：json-forms を見てください。

JSON-Schemaと最初のJSONデータを受け入れてフォームに入力します。

0
idelvall