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

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

    Підписка

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

    Підписка

      Валідація AngularJS

      advertisement advertisement

      Введение

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

      КОМЕНТАРІ ТА ОБГОВОРЕННЯ
      advertisement advertisement

      Купуй передплатуз доступом до всіх курсів та сервісів

      Бібліотека сучасних IT знань у зручному форматі

      Вибирай свій варіант підписки залежно від завдань, що стоять перед тобою. Але якщо потрібно пройти повне навчання з нуля до рівня фахівця, краще вибирати Базовий або Преміум. А для того, щоб вивчити 2-3 нові технології, або повторити знання, готуючись до співбесіди, підійде Пакет Стартовий.

      Стартовий
      • Усі відеокурси на 3 місяці
      • Тестування з 10 курсів
      • Перевірка 5 домашніх завдань
      • Консультація з тренером 30 хв
      59.99 $
      Придбати
      Преміум Plus
      • Усі відеокурси на 1 рік
      • Тестування з 24 курсів
      • Перевірка 20 домашніх завдань
      • Консультація з тренером 120 хв
      • Завантаження відео уроків
      120.00 $
      199.99 $
      Придбати
      Акція
      Базовий
      • Усі відеокурси на 6 місяців
      • Тестування з 16 курсів
      • Перевірка 10 домашніх завдань
      • Консультація з тренером 60 хв
      89.99 $
      Придбати
      Notification success
      Ми використовуємо cookie-файли, щоб зробити взаємодію з нашими веб-сайтами та послугами простою та значущою.