Учебники

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

Валидация — это процесс, обеспечивающий правильность и полноту данных.

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

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

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

В этом уроке вы узнаете

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

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

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

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

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

Проверка AngularJS - учиться за 10 минут!

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

Объяснение кода:

  1. Для типа ввода текста мы используем атрибут ‘required’. Это означает, что текстовое поле не может быть пустым при отправке формы, и в текстовом поле должен присутствовать какой-либо текст.
  2. Следующий тип ввода — пароль. Поскольку тип ввода помечен как пароль, когда пользователь вводит любой текст в поле, он будет замаскирован.
  3. Поскольку тип ввода указан как электронная почта, текст в поле должен соответствовать шаблону name@site.domain .
  4. Когда тип ввода помечен как число, если пользователь пытается ввести любой символ с помощью клавиатуры или алфавита, он не будет введен в текстовое поле.

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

Вывод:

Проверка AngularJS - учиться за 10 минут!

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

Проверка AngularJS - учиться за 10 минут!

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

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

Проверка AngularJS - учиться за 10 минут!

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

Проверка AngularJS - учиться за 10 минут!

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

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

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

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

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

  • $ dirty — пользователь взаимодействовал с элементом управления
  • $ valid — содержимое поля действительно
  • $ invalid — Недопустимое содержимое поля
  • $ pristine — пользователь еще не взаимодействовал с элементом управления

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

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

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

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

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

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

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

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

Проверка AngularJS - учиться за 10 минут!

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

Объяснение кода:

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

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

Вывод:

Проверка AngularJS - учиться за 10 минут!

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

Проверка AngularJS - учиться за 10 минут!

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

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

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

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

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

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

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

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

Проверка AngularJS - учиться за 10 минут!

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

Объяснение кода:

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

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

Вывод:

Проверка AngularJS - учиться за 10 минут!

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

Проверка AngularJS - учиться за 10 минут!

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

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

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

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

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

Проверка AngularJS - учиться за 10 минут!

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

Объяснение кода:

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

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

Вывод:

Проверка AngularJS - учиться за 10 минут!

Когда форма изначально отображается, кнопка отправки отображается в ее простой форме.

Проверка AngularJS - учиться за 10 минут!

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

Резюме

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