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

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

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

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

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

Валидация AngularJS

LIVE ONLINE FRONTEND DEVELOPER .NET Live Online

Введение

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

КОММЕНТАРИИ И ОБСУЖДЕНИЯ
LIVE ONLINE FRONTEND DEVELOPER .NET Live Online

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

Стартовый
  • Все видеокурсы на 3 месяца
  • Тестирование по 10 курсам
  • Проверка 5 домашних заданий
  • Консультация с тренером 30 мин
Базовый
  • Все видеокурсы на 6 месяцев
  • Тестирование по 16 курсам
  • Проверка 10 домашних заданий
  • Консультация с тренером 60 мин
Премиум
  • Все видеокурсы на 12 месяцев
  • Тестирование по 24 курсам
  • Проверка 20 домашних заданий
  • Консультация с тренером 120 мин
Notification success