Валидация AngularJS

Введение

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

На практике

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

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

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

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

Формы

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

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

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

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

Required

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

Minimum Length

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

Maximum Length

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

Pattern Matching

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

Email Matching

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

Number

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

URL

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

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

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

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

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

<div ng-message="minlength">Too short</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 в диапазон для любого сообщения об ошибке. То, что должно отобразиться:

<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.

<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>

<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>

<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>

<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>

form>

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

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

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

Библиотека современных IT знаний в удобном формате

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