Проверка формы AngularJS при отправке: пример регистрации

Проверка формы в AngularJS

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

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

Например, идентификатор электронной почты всегда должен быть в формате имя пользователя@сайт.домен; если кто-то вводит только имя пользователя в идентификатор электронной почты, то в идеале проверка должна завершиться неудачей. Таким образом, проверка предполагает выполнение этих базовых проверок перед отправкой данных на сервер для дальнейшей обработки.

Проверка формы с использованием HTML5

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

Давайте посмотрим, как проверка формы AngularJS может выполняться в HTML5.

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

Форма будет иметь элементы управления проверкой, чтобы гарантировать, что пользователь вводит информацию правильно.

<!DOCTYPE html>
<html>
<head>

    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body  ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">

    <form>
        &nbsp;&nbsp;&nbsp;&nbsp;
        Enter your user name:
        <input type="text"  name="name" required><br><br>&nbsp;&nbsp;&nbsp;

        Enter your password:&nbsp;&nbsp;&nbsp;
        <input type="password"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="email"/><br><br>&nbsp;&nbsp;&nbsp;

        Enter your age:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <input type="number" /><br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

        <input type="submit" value="Submit"/>
    </form>
</div>

</body>
</html>

Код Пояснение

Для типа ввода текста мы используем атрибут «обязательный». Это означает, что текстовое поле не может быть пустым при отправке формы, и в нем должен присутствовать какой-то текст.
Следующий тип ввода — пароль. Поскольку тип ввода помечен как пароль, когда пользователь вводит любой текст в поле, он будет замаскирован.
Поскольку тип ввода указан как электронная почта, текст в поле должен соответствовать шаблону. имя@сайт.домен.
Если тип ввода помечен как число, то если пользователь попытается ввести любой символ с помощью клавиатуры или алфавита, он не будет введен в текстовое поле.

Если код выполнен успешно, при запуске кода в браузере для проверки формы AngularJS при отправке будет показан следующий вывод.

Результат

Чтобы увидеть проверку формы в действии, нажмите кнопку «Отправить», не вводя никакой информации на экране.

После нажатия кнопки «Отправить» появится всплывающее окно с сообщением об ошибке проверки, требующее заполнения поля.

Таким образом, проверка элемента управления, который был помечен как обязательный, приводит к отображению сообщения об ошибке, если пользователь не вводит какое-либо значение в текстовое поле.

Когда пользователь вводит любое значение в поле пароля, вы увидите символ «*», используемый для маскировки вводимых символов.

Затем давайте введем неверный идентификатор электронной почты и нажмите кнопку «Отправить». После нажатия кнопки «Отправить» появится всплывающее окно с сообщением об ошибке проверки, согласно которому поле должно иметь символ @.

Таким образом, проверка элемента управления, который был помечен как элемент управления электронной почты, приведет к отображению сообщения об ошибке, если пользователь не вводит правильный идентификатор электронной почты в текстовое поле.

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

Проверка формы с использованием $dirty, $valid, $invalid, $pristine

AngularJS предоставляет дополнительные свойства для проверки. AngularJS предоставляет следующие свойства для элементов управления в целях проверки.

$ грязный – Пользователь взаимодействовал с элементом управления
$ действительный – Содержимое поля действительно
$ неверный – Содержимое поля неверно.
$ нетронутый – Пользователь еще не взаимодействовал с элементом управления

Ниже приведены шаги, которые необходимо выполнить для выполнения проверки Angular.

Шаг 1) Используйте свойство no validate при объявлении формы. Это свойство сообщает HTML5, что проверку будет выполнять AngularJS.

Шаг 2) Убедитесь, что для формы определено имя. Причина этого заключается в том, что при выполнении проверки Angular будет использоваться имя формы.

Шаг 3) Убедитесь, что для каждого элемента управления также определено имя. Причина этого в том, что при выполнении проверки Angular будет использоваться имя элемента управления.

Шаг 4) Использовать нг-шоу директива для проверки свойств $dirty, $invalid и $valid для элементов управления.

Давайте рассмотрим пример, который включает в себя вышеупомянутые шаги.

В нашем примере

У нас просто будет простое текстовое поле, в котором пользователю нужно будет ввести название темы в текстовом поле. Если этого не сделать, возникнет ошибка проверки, и пользователю будет показано сообщение об ошибке.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>

<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
    <p>Topic Name:<br>
        <input type="text" name="user" ng-model="user" required>

        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">

            <span ng-show="myForm.user.$error.required">Username is required</span>
        </span>
    </p>
    <p>
        <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
    </p>
</form>
<script>
    var app = angular.module("DemoApp",[]);

    app.controller("DemoController",function($scope) {

        $scope.Display = function () {
            $scope.user='Angular';
        }
    });
</script>
</body>
</html>

Код Пояснение

Обратите внимание, что мы дали форме имя «myForm». Это необходимо при доступе к элементам управления в форме для проверки AngularJS.
Использование свойства «novalidate» для обеспечения того, чтобы HTML-форма позволяла AngularJS выполнять проверку.
Мы используем директиву ng-show для проверки свойств «$dirty» и «$invalid». Это означает, что если текстовое поле было изменено, значение свойства «$dirty» будет истинным. Кроме того, в случае, если значение текстового поля равно нулю, свойство «$invalid» станет истинным. Таким образом, если оба свойства истинны, проверка элемента управления завершится неудачей. Следовательно, если оба значения верны, ng-show также станет истинным, и будет отображаться элемент управления диапазоном с символами красного цвета.
При этом мы проверяем свойство «$error», которое также имеет значение true, поскольку мы упомянули для элемента управления, что для него необходимо ввести значение. В таком случае, если в текстовое поле не введены данные, элемент управления диапазоном отобразит текст «Требуется имя пользователя».
Если значение элемента управления текстовым полем недопустимо, мы также хотим отключить кнопку отправки, чтобы пользователь не мог отправить форму. Мы используем свойство «ng-disabled» для элемента управления, чтобы сделать это на основе условного значения свойств «$dirty» и «$invalid» элемента управления.
В контроллере мы просто устанавливаем начальное значение значения текстового поля на текст AngularJS. Это делается просто для того, чтобы установить какое-то значение по умолчанию для текстового поля при первом отображении формы. Он лучше демонстрирует, как происходит проверка поля текстового поля.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

Когда форма первоначально отображается, в текстовом поле отображается значение «AngularJS», а «кнопка отправки» включена. Как только вы удалите текст из элемента управления, появится сообщение об ошибке проверки, а кнопка «Отправить» станет неактивной.

На скриншоте выше показаны две вещи

Кнопка "Отправить" неактивна
В текстовом поле «Тема» нет названия темы. Следовательно, он выдает сообщение об ошибке «Требуется имя пользователя».

Проверка формы с использованием AngularJS Auto Validate

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

При наличии этого модуля вам не нужно размещать какой-либо специальный код для выполнения проверки или отображения сообщений об ошибках. Все это обрабатывается кодом внутри JCS-AutoValidate.

Давайте посмотрим на простой пример, как этого добиться.

В этом примере

У нас будет простая форма с текстовым полем, которое является обязательным полем. Если этот элемент управления не заполнен, должно появиться сообщение об ошибке.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp">
    <div class="form-group">
        <form name="myForm" novalidate>
            <p>Topic Name:<br></p>
                <div class="form-group">
            <input class="form-control" type="text" id="user" ng-model="user" required="required"/>

        </div>
            <div>
                <div class="form-group">
                    <input type="submit">
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>

Код Пояснение

Во-первых, нам нужно включить скрипт «jcs-auto-validate.js», который имеет все функции автоматической проверки.
Нам необходимо убедиться, что каждый элемент, включая тег «div», помещен в класс «form-group».
Также необходимо убедиться, что каждый элемент (который является элементом HTML, таким как элемент управления вводом, элемент управления диапазоном, элемент управления div и т. д.), такой как элементы управления вводом, также помещен в класс группы форм.
Включите jcs-autovalidate в свой JS-модуль AngularJS.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

По умолчанию при запуске кода приведенная выше форма будет отображаться в соответствии с HTML-кодом.

Если вы попытаетесь отправить форму, появится всплывающее сообщение об ошибке: «Это поле является обязательным». Все это делается с помощью опции JCS-AutoValidate.

Отзывы пользователей с кнопками Ladda

Кнопки «ладда» — это специальная структура, созданная для кнопок поверх JavaСценарий для придания визуальных эффектов кнопкам при их нажатии.

Таким образом, если кнопке присвоен атрибут «ladda» и она нажата, будет показан эффект вращения. Кроме того, для кнопки доступны различные стили данных, обеспечивающие дополнительные визуальные эффекты.

Давайте посмотрим на примере, как увидеть кнопки «ладда» в действии. Мы просто увидим простую форму с кнопкой отправки. При нажатии кнопки на ней будет отображаться эффект вращения.

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <div class="form-group">
        <form name="myForm" novalidate ng-submit="submit()">
            <div>
                <button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
            </div>
        </form>
    </div>
</div>
<script>
    var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);

    app.controller('DemoController',function($scope) {
        $scope.submitting = false;

        $scope.submit = function () {
            $scope.submitting = true;
        }
    });
</script>
</body>
</html>

Код Пояснение

Мы используем «ng-отправитьдиректива для вызова функции под названием «отправить». Эта функция будет использоваться для изменения атрибута ladda кнопки отправки.
Атрибут ladda — это специальный атрибут платформы ladda. Именно этот атрибут добавляет к управлению эффект вращения. Мы устанавливаем значение атрибута ladda для отправляемой переменной.
Свойство data-style снова является дополнительным атрибутом, предлагаемым платформой ladda, который просто добавляет другой визуальный эффект к кнопке отправки.
Модуль AngularJS-ladda необходимо добавить в приложение AngularJS.JS, чтобы платформа ladda работала.
Первоначально мы определяем и присваиваем значению переменной «submitting» значение false. Это значение установлено для атрибута ladda кнопки отправки. Изначально устанавливая для этого параметра значение false, мы говорим, что пока не хотим, чтобы кнопка отправки имела эффект ладды.
Мы объявляем функцию, которая вызывается при нажатии кнопки отправки. В этой функции мы устанавливаем для параметра «отправка» значение true. Это приведет к применению эффекта ladda к кнопке отправки.

Если код выполнен успешно, при запуске кода в браузере будет отображен следующий вывод.

Результат

При первоначальном отображении формы кнопка отправки отображается в простой форме.

При нажатии кнопки отправки переменная отправки в контроллере устанавливается в значение true. Это значение передается атрибуту «ladda» кнопки отправки, что вызывает эффект вращения кнопки.

Резюме

Проверку HTML-элементов управления текстовым полем можно выполнить с помощью атрибута «required».
В HTML5 добавлены новые элементы управления, такие как пароль, адрес электронной почты и номер, которые предоставляют собственный набор проверок.
Проверка формы в AngularJS осуществляется путем просмотра значений $dirty, $valid, $invalid и $pristine элемента управления формой.
Автоматическую проверку в приложениях AngularJS также можно выполнить с помощью модуля JCS-auto validate.
Кнопки Ladda можно добавить в приложение Angular.js, чтобы дать пользователю немного улучшенное визуальное ощущение при нажатии кнопки.

Вы могли бы:

Проверка формы в AngularJS

Проверка формы с использованием HTML5

Код Пояснение

Результат

СТАТЬИ ПО ТЕМЕ

Проверка формы с использованием $dirty, $valid, $invalid, $pristine

Код Пояснение

Результат

Проверка формы с использованием AngularJS Auto Validate

Код Пояснение

Результат

Отзывы пользователей с кнопками Ladda

Код Пояснение

Результат

Резюме