Введение

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