Блог

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

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

• Имя

• Фамилия

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

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

Используя 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/

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

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. Вызовите функцию для элемента form и определите поля формы в 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
   }});