Валидация AngularJS - Блог ITVDN
ITVDN: курсы программирования
Видеокурсы по
программированию

    Выбери свою IT специальность

    Начать бесплатно

    Выбери свою IT специальность

    Начать бесплатно

      Валидация AngularJS

      Введение

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


      На практике

      Использование angular-message

      Чтобы использовать angular-message, нужно внести в ваш проект модуль: 

      angular.module("realestateApp", ["ngMessages"]);

      Теперь ng-message будет доступен для использования.

      Формы

      Для инициализации процесса валидации, Вы должны начать с формы контейнера:

      <form name="tenantForm">

      Теперь внутри тега

      можно добавить управление и логику на их проверку.

      В сценариях валидации, как правило, есть несколько основных атрибутов. Те, которые стоит использовать: Required, Minimum, Maximum, Pattern, Email, Number, и URL.

      Required

      Этот атрибут заставляет form быть недействительным, если обязательное поле не вводится.

      <input type="text" required />

      Minimum Length

      Этот атрибут указывает минимум символов для ввода до того, как значение будет принято.

      <input type="text" ng-minlength=5 />

      Maximum Length

      Этот атрибут указывает максимальную длину или проверка будет неверна.

      <input type="text" ng-maxlength=20 />

      Pattern Matching

      Эта функция позволяет согласовать совпадения при использовании Regex.

      <input type="text" ng-pattern="[a-zA-Z]" />

      Email Matching

      Angular обеспечивает пользовательские функции по электронной почте.

      <input type="email" name="email" ng-model="user.email" />

      Number

      Этот требует ввода в цифровом формате перед проверкой.

      <input type="number" name="age" ng-model="user.age" />

      URL

      Этот требует ввода в ссылочном формате перед проверкой.

      <input type="url" name="homepage" ng-model="user.url" />

      Сообщение об ошибке

      Ранее использовался error-container, но теперь можно использовать директиву ng-message:

      <div ng-messages="tenantForm.Email.$error" ng-messages-include="messages.html" class="errors"></div>

      Также нужен файл messages.html для хранения сообщений об ошибках:

      <div class="messages">

      <div ng-message="required">Required</div>

      <div ng-message="minlength">Too short</div>

      <div ng-message="maxlength">Too long</div>

      <div ng-message="email">Invalid email address</div>

      <div ng-message="compareTo">Must match the previous entry</div>

      <div ng-message="number">Must be a number</div>

      <div ng-message="url">Must be in URL format</div>

      </div>

      Сообщение об отмене ошибки

      Иногда Вы должны иметь пользовательские сообщения об ошибках, не охватываемых messages.html. Вы можете сделать это, добавив тег span в диапазон для любого сообщения об ошибке. То, что должно отобразиться:

      <div ng-messages="tenantForm.FirstName.$error" ng-messages-include="messages.html" class="errors">

      <span class="messages" ng-message="minlength">Must be more than 3 characters</span>

      <span class="messages" ng-message="maxlength">Must be more than 20 characters</span>

      </div>

      Собираем всё вместе

      Теперь, объединив messages.html с index.html.

      <form name="tenantForm" novalidate style="width: 500px">

          <div class="row">

              <div ng-repeat="tenant in tenant">

                  <div class="form-group">

                      <label>First Name: label>

                      <input type="text"

                             placeholder="First Name"

                             name="FirstName"

                             ng-model="tenant.FirstName"

                             ng-minlength=3

                             ng-maxlength=20 required />

                      <div ng-messages="tenantForm.FirstName.$error"

                           ng-messages-include="messages.html" class="errors">

                          <span class="messages"

                          ng-message="minlength">Must be more than 3 charactersspan>

                          <span class="messages"

                          ng-message="maxlength">Must be more than 20 charactersspan>

                      div>

                  div>

                  <div class="form-group">

                      <label>Home Phone: label>

                      <input type="number"

                             placeholder="Phone Number"

                             name="HomePhone"

                             ng-model="tenant.HomePhone"

                             ng-minlength=7

                             ng-maxlength=10 required />

                      <div ng-messages="tenantForm.HomePhone.$error"

                           ng-messages-include="messages.html" class="errors">

                          <span class="messages"

                          ng-message="minlength">Must be more than 7 digitsspan>

                          <span class="messages"

                          ng-message="maxlength">Must be less than 11 digitsspan> 

                      div>

                  div>

                  <div class="form-group">

                      <label>Email: label>

                      <input type="email"

                             placeholder="Email"

                             name="Email"

                             ng-model="tenant.Email"

                             required />

                      <div ng-messages="tenantForm.Email.$error"

                           ng-messages-include="messages.html" class="errors">div>

                  div>

                  <div class="form-group">

                      <label>Webpage: label>

                      <input type="url"

                             placeholder="Webpage"

                             name="Webpage"

                             ng-model="tenant.Webpage"

                             required />

                      <div ng-messages="tenantForm.Webpage.$error"

                           ng-messages-include="messages.html" class="errors">

                      div>

                  div>

              div>

          div>              

      form>

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

      Источник: http://www.codeproject.com/Articles/992545/AngularJS-Validation

      КОММЕНТАРИИ И ОБСУЖДЕНИЯ

      Пакеты подписки с доступом ко всем курсам и сервисам

      Стартовый
      • Все видеокурсы на 3 месяца
      • Тестирование по 10 курсам
      • Проверка 5 домашних заданий
      • Консультация с тренером 30 мин
      Базовый
      • Все видеокурсы на 6 месяцев
      • Тестирование по 16 курсам
      • Проверка 10 домашних заданий
      • Консультация с тренером 60 мин
      Премиум
      • Все видеокурсы на 1 год
      • Тестирование по 24 курсам
      • Проверка 20 домашних заданий
      • Консультация с тренером 120 мин
      Notification success
      Мы используем cookie-файлы, чтобы сделать взаимодействие с нашими веб-сайтами и услугами простым и значимым.