Введение в валидацию форм Bootstrap

Валидация используется для формирования Приемки с некоторыми правилами и положениями. Bootstrap имеет много классов для создания формы. Но проверка требует контрольных данных о форме. В этом разделе мы узнаем о типах проверки формы Bootstrap.

Например, форма имеет пароль. Пароль имеет много правил в соответствии с требованиями. Кому-то нужны буквы, многим - цифры, а кому-то нужны специальные символы. Пользователь знает выполнение требования, валидация важна.

Иногда пользователь не получает точного требования формы или того, сколько требуется для выполнения, такая проверка времени помогает правильно представить данные. Если вы не соответствуете спецификации, вы получите отзыв в форме автоматически.

Как проверить формы с помощью Bootstrap?

  • Форма начальной загрузки позволяет проверке преодолеть все сложности кодирования JavaScript и легко работать с классами.
  • Три проверки формы начальной загрузки идут с некоторым глификом, чтобы получить сообщение об ошибке, предупреждении и успехе. Классы проверки всегда помещаются в родительский класс.
  • Наряду с проверочными классами также требуется класс has-feedback, чтобы значок находился в нужном месте в поле ввода формы вместе с меткой. Этот класс помещен в родительский класс.

Пример:

Класс form-control-feedback также был необходим со значком глифа, чтобы установить значок в поле формы ввода.

Пример:

Типы проверки форм Bootstrap

Есть три типа начальной загрузки, как указано ниже:

1. имеет успех

Этот класс используется, чтобы получить сообщение об успехе. С этим классом проверки пользователям также нужен значок «glyphicon glyphicon-ok», чтобы показать значок успеха. Если пользователь вводит данные в форму правильно, то эта проверка работала.

Класс has-success подходит для родительского класса. Чтобы получить сообщение об успешном использовании этой проверки используется. В приведенном ниже примере представлен формат горизонтальной формы. Выход приходит с сообщением в зеленом цвете.

Синтаксис:

.

Пример:



Paasword


Выход:

2. имеет предупреждение

Этот класс используется для предупреждений о вводе формы. С этим классом проверки пользователям также необходим значок «глификон-знак предупреждения-глифа», чтобы показать значок предупреждения. Если мы введем неправильный ввод в форму, у нас будет еще один шанс ввести ввод, чтобы сработала проверка предупреждений времени.

Класс проверки предупреждения помещен в родительский класс с классом обратной связи. Если пользователь получает предупреждение о какой-то ошибке, этот класс сработал. Результат приходит с сообщением в желтом цвете.

Синтаксис:

.

Пример:



Paasword


Выход:

3. имеет ошибку

Этот класс используется для сообщения об ошибке ввода формы. С этим классом проверки пользователям также нужен значок «glyphicon glyphicon-remove», чтобы показать значок ошибки. Если мы введем неправильный ввод в форму, эта проверка сработала.

Класс проверки ошибок помещен в родительский класс с классом обратной связи. Если пользователь получает сообщение об ошибке error, этот класс работал.

Синтаксис:

Пример:



Paasword


Выход:

Описание: Вся форма представляет собой горизонтальную планировку. Метка имеет 2 столбца, а ввод имеет 10 столбцов. Класс проверки установлен с обратной связью в родительском div. Чтобы увидеть значок, пользователь использовал значки глифов с обратной связью формы в

Пользователи работают над паролем. либо пароль верен, то успешная проверка работоспособности, либо пароль неверен, чем проверка правильности работ. Если в пароле есть какая-то ошибка, и мы можем его исправить, предупреждение работает.

Примеры проверки форм Bootstrap

Ниже приведены различные примеры проверки форм начальной загрузки:

Пример № 1

Следующий пример - Проверка с горизонтальной формой. Glyphicon sign - это работа над внутренним полем ввода в форме. Метка и ввод в одну горизонтальную линию, но все классы группы форм расположены вертикально.



Success



Warning



Error


Выход:

Пример № 2

Следующий пример - Проверка с вертикальной формой. В вертикальной форме все метки и входы расположены вертикально. Глификон может быть расположен в строке метки в конце поля ввода.

Там нет класса в форме. Он редко используется при проверке формы в начальной загрузке.



Success



Warning



Error


Выход:

Пример № 3

Следующий пример - проверка с помощью встроенной формы. Встроенная форма имеет все метки и ввод в одну строку, включая все группы форм. Это сложный, но проверочный значок, помещенный в поле ввода формы.

Если пользователям нужна только небольшая форма и форма входа в систему, тогда с валидациями может применяться встроенная форма.



Success



Warning



Error


Выход:

Прежде всего, пример имеет все типы проверки со всем макетом и как это работает. В соответствии с требованиями пользователя и легкостью выберите формат проверки формы и макета.

Вывод

В основном проверка формы происходит на стороне сервера для управления данными формы в базе данных. Для этих целей мы получаем много сложного кодирования и используем метод проверки с использованием языка JavaScript.

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

Рекомендуемые статьи

Это руководство по проверке формы Bootstrap. Здесь мы обсуждаем 3 типа проверки форм Bootstrap вместе с соответствующими примерами. Вы также можете посмотреть на следующую статью.

  1. Схема начальной загрузки
  2. Компоненты начальной загрузки
  3. Что такое Bootstrap?
  4. Команды начальной загрузки
  5. Макет формы начальной загрузки с примерами
  6. Формы в JavaScript | Программа для проверки формы