Валидация - это процесс, обеспечивающий правильность и полноту данных.
В реальном примере предположим, что сайт требует заполнения регистрационной формы, прежде чем получить полный доступ к этому сайту. На странице регистрации будут поля для ввода имени пользователя, пароля, идентификатора электронной почты и т. Д.
Когда пользователь отправляет форму, обычно сначала выполняется проверка, прежде чем детали будут отправлены на сервер. Эта проверка будет пытаться гарантировать, насколько это возможно, правильность ввода данных для полей ввода.
Например, идентификатор электронной почты всегда должен иметь формат « Этот адрес электронной почты защищен от спам-ботов». У вас должен быть включен JavaScript для просмотра. ; если кто-то вводит только имя пользователя в идентификатор электронной почты, тогда в идеале проверка должна завершиться неудачей. Таким образом, проверка предполагает выполнение этих основных проверок перед отправкой данных на сервер для дальнейшей обработки.
В этом руководстве вы узнаете:
- Проверка формы с использованием HTML5
- Проверка формы с использованием $ dirty, $ valid, $ invalid, $ pristine
- Проверка формы с использованием автоматической проверки AngularJS
- Отзывы пользователей с помощью кнопок Ladda
Проверка формы с использованием HTML5
Проверка формы - это процесс предварительной проверки информации, введенной пользователем в веб-форму, перед ее отправкой на сервер. Всегда лучше проверять информацию на самой стороне клиента. Это связано с тем, что это добавляет меньше накладных расходов, если пользователю нужно было снова представить форму, если введенная информация была неправильной.
Давайте посмотрим, как можно проводить проверку формы в HTML5.
В нашем примере мы покажем пользователю одну простую регистрационную форму, в которой пользователь должен ввести такие данные, как имя пользователя, пароль, идентификатор электронной почты и возраст.
Форма будет иметь элементы управления проверкой, чтобы гарантировать, что пользователь вводит информацию надлежащим образом.
Event Registration Guru99 Global Event
Пояснение к коду:
- Для типа ввода текста мы используем атрибут «required». Это означает, что текстовое поле не может быть пустым при отправке формы, и в текстовом поле должен присутствовать какой-то текст.
- Следующий тип ввода - пароль. Поскольку тип ввода помечен как пароль, когда пользователь вводит любой текст в поле, он будет замаскирован.
- Поскольку тип ввода указан как электронная почта, текст в поле должен соответствовать шаблону. Этот адрес электронной почты защищен от спам-ботов. У вас должен быть включен JavaScript для просмотра. .
- Когда тип ввода отмечен как число, если пользователь пытается ввести любой символ с помощью клавиатуры или алфавита, он не будет введен в текстовое поле.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Чтобы увидеть проверку формы в действии, нажмите кнопку «Отправить», не вводя никакой информации на экране.
После нажатия кнопки отправки появится всплывающее окно с сообщением об ошибке проверки, что поле необходимо заполнить.
Таким образом, проверка для элемента управления, который был помечен как обязательный, вызывает отображение сообщения об ошибке, если пользователь не вводит никакого значения в текстовое поле.
Когда пользователь вводит любое значение в элемент управления паролем, вы заметите символ «*», используемый для маскировки вводимых символов.
Затем введите неправильный идентификатор электронной почты и нажмите кнопку отправки. После нажатия кнопки отправки появится всплывающее окно, показывающее ошибку проверки, что поле должно иметь символ @.
Таким образом, проверка для элемента управления, который был помечен как элемент управления электронной почтой, приведет к отображению сообщения об ошибке, если пользователь не введет правильный идентификатор электронной почты в текстовое поле.
Наконец, когда вы пытаетесь ввести какие-либо символы в текстовом элементе управления возрастом, он не будет отображаться на экране. Элемент управления будет заполняться значением только при вводе числа в элемент управления.
Проверка формы с использованием $ dirty, $ valid, $ invalid, $ pristine
AngularJS предоставляет свои дополнительные свойства для проверки. AngularJS предоставляет следующие свойства для элементов управления в целях проверки
- $ dirty - Пользователь взаимодействовал с элементом управления
- $ valid - Содержимое поля действительно
- $ invalid - недопустимое содержимое поля
- $ pristine - пользователь еще не взаимодействовал с элементом управления
Ниже приведены шаги, которые необходимо выполнить для выполнения проверки Angular.
Шаг 1) Используйте свойство no validate при объявлении формы. Это свойство сообщает HTML5, что проверка будет выполняться AngularJS.
Шаг 2) Убедитесь, что для формы определено имя. Причина в том, что при проверке Angular будет использоваться имя формы.
Шаг 3) Убедитесь, что для каждого элемента управления также определено имя. Причина этого в том, что при проверке Angular будет использоваться имя элемента управления.
Шаг 4) Используйте директиву ng-show, чтобы проверить свойства $ dirty, $ invalid и $ valid для элементов управления.
Давайте посмотрим на пример, который включает в себя вышеупомянутые шаги.
В нашем примере
У нас просто будет простое текстовое поле, в которое пользователь должен ввести название темы в текстовое поле. Если этого не сделать, будет вызвана ошибка проверки, и пользователю будет показано сообщение об ошибке.
Event Registration Guru99 Global Event
Пояснение к коду:
- Обратите внимание, что мы дали форме имя «myForm». Это требуется при доступе к элементам управления в форме для проверки AngularJS.
- Использование свойства «novalidate» для обеспечения того, чтобы HTML-форма позволяла AngularJS выполнять проверку.
- Мы используем директиву ng-show для проверки свойств «$ dirty» и «$ invalid». Это означает, что если текстовое поле было изменено, то значение свойства «$ dirty» будет истинным. Кроме того, в случае, если значение текстового поля равно нулю, свойство «$ invalid» становится истинным. Таким образом, если оба свойства верны, проверка для элемента управления не удастся. Следовательно, если оба значения верны, ng-show также станет истинным, и будет отображаться элемент управления диапазоном с символами красного цвета.
- Здесь мы проверяем свойство «$ error», которое также имеет значение true, потому что мы упомянули для элемента управления, что значение должно быть введено для элемента управления. В таком случае, когда в текстовое поле не введены данные, элемент управления диапазоном отобразит текст «Требуется имя пользователя».
- Если значение элемента управления текстовым полем недействительно, мы также хотим отключить кнопку отправки, чтобы пользователь не мог отправить форму. Мы используем свойство «ng-disabled» для элемента управления, чтобы сделать это на основе условного значения свойств «$ dirty» и «$ invalid» элемента управления.
- В контроллере мы просто устанавливаем начальное значение значения текстового поля в текст «AngularJS». Это просто делается для установки некоторого значения по умолчанию для текстового поля при первом отображении формы. Он лучше демонстрирует, как выполняется проверка для поля текстового поля.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Когда форма отображается изначально, в текстовом поле отображается значение «AngularJS», а «кнопка отправки» активна. Как только вы удалите текст из элемента управления, появится сообщение об ошибке проверки, а кнопка «Отправить» будет отключена.
На приведенном выше снимке экрана показаны две вещи.
- Кнопка отправки неактивна
- В текстовом поле «Тема» нет названия темы. Следовательно, он выдает сообщение об ошибке «Требуется имя пользователя».
Проверка формы с использованием автоматической проверки AngularJS
В AngularJS есть возможность автоматически проверять все элементы управления в форме без необходимости писать собственный код для проверки. Это можно сделать, включив специальный модуль под названием «jcs-AutoValidate».
При наличии этого модуля вам не нужно размещать какой-либо специальный код для выполнения проверки или отображения сообщений об ошибках. Все это обрабатывается кодом внутри JCS-AutoValidate.
Давайте посмотрим на простой пример, как этого добиться.
В этом примере
У нас просто будет простая форма с элементом управления текстовым полем, которое является обязательным полем. Если этот элемент управления не заполнен, должно отображаться сообщение об ошибке.
Event Registration Guru99 Event
Пояснение к коду:
- Во-первых, нам нужно включить скрипт jcs-auto-validate.js, который имеет все функции автоматической проверки.
- Нам нужно убедиться, что каждый элемент, включая «тег div», помещен в класс «form-group».
- Также необходимо убедиться, что каждый элемент (который является элементом HTML, таким как элемент управления вводом, элемент управления диапазоном, элемент управления div и т. Д.), Например элементы управления вводом, также помещается в класс группы форм.
- Включите jcs-autovalidate в свой модуль AngularJS JS.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
По умолчанию, когда вы запускаете свой код, приведенная выше форма будет отображаться в соответствии с кодом HTML.
Если вы попытаетесь отправить форму, появится сообщение об ошибке: «Это поле обязательно для заполнения». Все это делается с помощью опции JCS-AutoValidate.
Отзывы пользователей с кнопками Ladda
Кнопки «ладда» - это специальная структура, созданная для кнопок поверх JavaScript, чтобы придать кнопкам визуальный эффект при их нажатии.
Таким образом, если кнопке присвоить атрибут "ladda" и она будет нажата, будет показан эффект вращения. Кроме того, для кнопки доступны различные стили данных, обеспечивающие дополнительные визуальные эффекты.
Давайте посмотрим на примере того, как увидеть кнопки «ладда» в действии. Мы просто увидим простую форму с кнопкой отправки. Когда кнопка нажата, на кнопке будет показан эффект вращения.
Event Registration Guru99 Event
Пояснение к коду:
- Мы используем директиву «ng-submit» для вызова функции «submit». Эта функция будет использоваться для изменения атрибута ladda кнопки отправки.
- Атрибут ладда - это особый атрибут каркаса ладда. Именно этот атрибут добавляет к управлению эффект вращения. Мы устанавливаем значение атрибута ladda для переменной submit.
- Свойство стиля данных снова является дополнительным атрибутом, предлагаемым платформой ladda, которая просто добавляет другой визуальный эффект к кнопке отправки.
- Модуль AngularJS-ladda необходимо добавить в приложение AngularJS.JS, чтобы фреймворк ladda работал.
- Первоначально мы определяем и устанавливаем значение переменной под названием «submitting» в false. Это значение устанавливается для атрибута ladda кнопки отправки. Первоначально устанавливая для этого параметра значение false, мы говорим, что пока не хотим, чтобы кнопка отправки имела эффект ладда.
- Мы объявляем функцию, которая вызывается при нажатии кнопки отправки. В этой функции мы устанавливаем для параметра «submitting» значение true. Это приведет к применению эффекта ладды к кнопке отправки.
Если код выполнен успешно, при запуске кода в браузере будет показан следующий результат.
Выход:
Когда форма отображается изначально, кнопка отправки отображается в ее простой форме.
Когда кнопка отправки нажата, для переменной отправки в контроллере устанавливается значение true. Это значение передается в атрибут "ladda" кнопки отправки, который вызывает эффект вращения кнопки.
Резюме
- Проверка HTML-элементов управления текстового поля может быть выполнена с помощью атрибута required.
- В HTML5 добавлены новые элементы управления, такие как пароль, адрес электронной почты и номер, которые обеспечивают собственный набор проверок.
- Проверка формы в AngularJS осуществляется путем просмотра значений $ dirty, $ valid, $ invalid и $ pristine элемента управления формы.
- Автоматическая проверка в приложениях AngularJS также может быть достигнута с помощью модуля автоматической проверки JCS.
- Кнопки Ladda могут быть добавлены в приложение Angular.js, чтобы дать пользователю немного улучшенного визуального восприятия при нажатии кнопки.