Проверка формы HTML в данных JSON

Question

Существует ли какая-либо библиотека или JavaScript для создания формы с проверкой с использованием данных JSON?

Например, если у меня есть JSON что-то вроде {firstname: Jhon, lastname: Doe, age:32} и у меня есть форма ввода HTML во внешней системе с полями:

• Имя

• Фамилия

Когда посетитель вводит свое имя в форму, в бэкэнде проверяется проверка по данным JSON.

Спасибо залюбые предложения.

Answer 1

Использование React и node.js может стать более безопасным решением в будущем, поскольку оно стало отраслевым стандартом ... Вы смотрели: https://www.npmjs.com/package/react-jsonschema-form?

Это выглядит довольно солидно с точки зрения еженедельных загрузок и, кажется, хорошо подходит для вашего случая использования (я могу попробовать это сам).Единственным уловом было бы то, что есть кривая обучения, чтобы освоиться с миром React и nodejs.Я очень рекомендую это, хотя, если вы еще этого не сделали.Некоторые большие ресурсы для начала могут включать в себя:

• https://facebook.github.io/create-react-app/
• https://nodejs.org/en/
• https://code.visualstudio.com/

Оттудаэто может стать глубоким погружением, но я нахожу это забавным.Удачи!

Answer 2

1. Загрузите необходимые библиотеки jQuery и underscore.js в документ.

   <script src="/path/to/jquery.min.js"></script>
   <script src="/path/to/underscore.min.js"></script>
   

2. Загрузите таблицу стилей Bootstrap, чтобы украсить сгенерированные поля формы.

   <link rel="stylesheet"href="/path/to/bootstrap.css">
   

3. ДАЙТЕ имя класса для формы

   <form class="form">
   

4. Вызовите функцию в элементе формы и определите поля формы в JSON

   $('form').jsonForm({
   "schema": {
   "name": {
     "title": "your title",
     "description": "Your description",
     "type": "your type",
   },
     "enum": [
       "male",
       "female",
       "alien"
     ]
   }});
   

5. Проверка данных при отправке с помощью обратного вызова onSubmit.

   $('form').jsonForm({
   
   
   onSubmit: function (errors, values) {
   if (errors) {
     // do something
   }
   else {
     // do something
   }});