Создание HTML-форм из JSON или XML-фида с использованием JQuery
Я хотел бы создать HTML-форму на основе данных XML или JSON с помощью JQuery, и я также планирую проверить любые поля формы, которые могут быть пустыми или неправильными.
Я хотел бы знать, есть ли какие-либо другие программы/функции, которые генерируют такую форму динамически "на лету" и лучший способ реализовать это. Любые jquery-виджеты или библиотеки, которые лучше всего работают с примерами работы, будут высоко оценены
А также какой канал лучше всего использовать в этом сценарии XML или JSON и объясните, почему?
Спасибо
Ответы
Ответ 1
Я нашел некоторые из них, которые могут вам помочь:
Формирование форм из схемы JSON:
Создание форм из XML-схемы:
Образцы из разных библиотек для создания формы:
Ответ 2
Просто, чтобы дать вам другой выбор, созданную мной библиотеку:
https://github.com/brutusin/json-forms
Схема JSON для генератора форм HTML, поддерживающая динамические подсхемы (разрешение на лету). Расширяемая и настраиваемая библиотека с нулевыми зависимостями. Предоставлены надстройки загрузки
var bf = brutusin["json-forms"].create({
"$schema": "http://json-schema.org/draft-03/schema#",
"type": "object",
"properties": {
"s1": {
"type": "string",
"title": "A string",
"description": "A string input"
},
"num1": {
"type": "integer",
"title": "A number",
"minimum": 1,
"maximum": 10,
"multipleOf": 3,
"description": "An integer multiple of `3`, between `1` and `10` (inclusive)"
},
"array1": {
"type": "array",
"title": "An array values",
"items": {
"type": "object",
"properties": {
"value": {
"type": "string",
"title": "Value"
}
}
}
}
}
});
var container = document.getElementById('container');
bf.render(container);
<link rel="stylesheet" href='https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/css/brutusin-json-forms.min.css'/>
<link rel="stylesheet" href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'/>
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms.min.js"></script>
<script src="https://cdn.jsdelivr.net/brutusin.json-forms/1.3.2/js/brutusin-json-forms-bootstrap.min.js"></script>
<div id="container"></div>
<hr>
<button class="btn btn-primary" onclick="alert(JSON.stringify(bf.getData(), null, 4))">getData()</button> <button class="btn btn-primary" onclick="if (bf.validate()) {alert('Validation succeeded')}">validate()</button>