Различия

Здесь показаны различия между двумя версиями данной страницы.

--- angular:angularjs:form:validation [2020/05/29 09:20]
werwolf создано
+++ angular:angularjs:form:validation [2023/01/12 12:18] (текущий)
@@ Строка 16: / Строка 16: @@
 <h1>{{myForm.myInput.$valid}}</h1>
 </code>
+====E-mail====
+Используйте атрибут HTML5, чтобы указать, что значение должно быть электронной почтой:
+<code html>
+<form name="myForm">
+  <input name="myInput" ng-model="myInput" type="email">
+</form>
+<p>The input's valid state is:</p>
+<h1>{{myForm.myInput.$valid}}</h1>
+</code>
+====Form State and Input State====
+AngularJS постоянно обновляет состояние как формы, так и полей ввода.\\
+Поля ввода имеют следующие состояния:
+  * **$untouched** Поле еще не было затронуто
+  * **$touched** Поле было затронуто
+  * **$pristine** Поле еще не было изменено
+  * **$dirty** Поле было изменено
+  * **$invalid** Содержание поля недействительно
+  * **$valid** Содержание поля действительно
+Все они являются свойствами полей ввода и имеют значение true или false.\\
+Формы имеют следующие состояния:\\
+$pristine Поля еще не были изменены
+$dirty Один или несколько были изменены
+$invalid Содержание формы недействительно
+$valid Содержание формы действительно
+$submitted Форма отправлена
+Все они являются свойствами формы и являются либо истинными, либо ложными.
+Вы можете использовать эти состояния для показа значимых сообщений пользователю. Например, если поле является обязательным, и пользователь оставляет его пустым, вы должны вывести ему предупреждение:\\
+===пример===
+Показать сообщение об ошибке, если на поле сфокусировались и оставили его пустым:\\
+<code html>
+ <input name="myName" ng-model="myName" required>
+<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
+</code>
+====CSS Classes====
+//AngularJS// добавляет классы //CSS// к формам и полям ввода в зависимости от их состояний.\\
+\\
+Следующие классы добавляются или удаляются из полей ввода:
+  * **ng-untouched** Поле еще не было затронуто
+  * **ng-touched** Поле было затронуто
+  * **ng-pristine** Поле еще не было изменено
+  * **ng-dirty** Поле было изменено
+  * **ng-valid** Содержание поля действительно
+  * **ng-invalid** Содержание поля недействительно
+  * **ng-valid-key** Один ключ для каждой проверки. Пример: ng-valid-required, полезно, когда есть более чем один параметр, который должен быть проверен.
+  * **ng-invalid-key** Пример: ng-invalid-required
+Следующие классы добавляются или удаляются из форм:\\
+  * **ng-pristine** Ни одно из полей не было изменено
+  * **ng-dirty** Одно или несколько полей были изменены
+  * **ng-valid** Содержание формы действительно
+  * **ng-invalid** Содержание формы недействительно
+  * **ng-valid-key** Один ключ для каждой проверки. Пример: ng-valid-required, полезно, когда есть более чем один параметр, который должен быть проверен.
+  * **ng-invalid-key** Пример: ng-invalid-required
+Классы удаляются, если значение, которое они представляют, равно false.\\
+Добавьте стили для этих классов, чтобы дать вашему приложению лучший и более понятный пользовательский интерфейс.\\
+===Пример===
+Применяйте стили, используя стандартный CSS:
+<code html>
+<style>
+input.ng-invalid {
+  background-color: pink;
+}
+input.ng-valid {
+  background-color: lightgreen;
+}
+</style>
+</code>
+Формы также могут быть стилизованы:
+<code html>
+<style>
+form.ng-pristine {
+  background-color: lightblue;
+}
+form.ng-dirty {
+  background-color: pink;
+}
+</style>
+</code>
+====Отображение сообщений о невалидности====
+отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку **submit**\\
+<code html>
+<!DOCTYPE html>
+<html ng-app="studyModule">
+<head>
+    <!--отображение сообщений о невалидности пользовательского ввода это хороший тон но существует два подхода для
+    отображения сообщений: 1й когда ввод валидируется после каждого действия пользователя и 2й данные валидируются после нажатия на кнопку submit-->
+    <title>Forms</title>
+    <script src="../angular.min%20.js"></script>
+    <link href="../bootstrap-theme.css" rel="stylesheet" />
+    <link href="../bootstrap.css" rel="stylesheet" />
+    <script>
+        angular.module("studyModule", [])
+            .controller("studyCtrl", function ($scope) {
+                $scope.addNewUser = function (userDetails) {
+                    if (myForm.$valid) {
+                        $scope.message = userDetails.name
+                            + " (" + userDetails.email + ") (" + userDetails.agreed + ")";
+                    } else {
+                        $scope.showValidation = true;
+                    }
+                };
+                $scope.message = "Ready";
+                $scope.getError = function (error) {
+                    if (angular.isDefined(error)) {
+                        if (error.required) {
+                            return "Please enter a value";
+                        } else if (error.email) {
+                            return "Please enter a valid email address";
+                        }
+                    }
+                };
+            });
+    </script>
+    <style>
+        form.validate .ng-invalid-required.ng-dirty {
+            background-color: lightpink;
+        }
+        form.validate .ng-invalid-email.ng-dirty {
+            background-color: lightgoldenrodyellow;
+        }
+        div.error {
+            color: red;
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+    <div id="todoPanel" class="panel col-xs-3" ng-controller="studyCtrl">
+        <form name="myForm" novalidate ng-submit="addNewUser(newUser)" ng-class="showValidation ? 'validate' : ''">
+            <div class="well">
+                <div class="form-group">
+                    <label>Name:</label>
+                    <input name="userName" type="text" class="form-control" required ng-model="newUser.name">
+                </div>
+                <div class="form-group">
+                    <label>Email:</label>
+                    <input name="userEmail" type="email" class="form-control" required ng-model="newUser.email">
+                    <div class="error" ng-show="showValidation">
+                        {{getError(myForm.userEmail.$error)}}
+                    </div>
+                </div>
+                <button type="submit" class="btn btn-primary btn-block">
+                    OK
+                </button>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+</code>
+====Пользовательская валидация====
+Создать свою собственную функцию проверки немного сложнее; Вы должны добавить новую директиву в ваше приложение и обрабатывать данные внутри нее.
+===Пример===
+Создайте свою собственную директиву, содержащую пользовательскую функцию проверки, и обратитесь к ней с помощью **my-directive**.\\
+Поле будет действительным, только если значение содержит символ «е»:
+<code html>
+<form name="myForm">
+<input name="myInput" ng-model="myInput" required my-directive>
+</form>
+<script>
+var app = angular.module('myApp', []);
+app.directive('myDirective', function() {
+  return {
+    require: 'ngModel',
+    link: function(scope, element, attr, mCtrl) {
+      function myValidation(value) {
+        if (value.indexOf("e") > -1) {
+          mCtrl.$setValidity('charE', true);
+        } else {
+          mCtrl.$setValidity('charE', false);
+        }
+        return value;
+      }
+      mCtrl.$parsers.push(myValidation);
+    }
+  };
+});
+</script>
+</code>
+В HTML новая директива будет указываться с помощью атрибута **my-directive**.\\
+В JavaScript мы начинаем с добавления новой директивы **myDirective**.\\
+Помните, что при именовании директивы вы должны использовать имя дела верблюда, myDirective, но при его вызове вы должны использовать разделенное имя, **my-directive**.\\
+Затем верните объект, в котором вы указываете, что нам требуется **ngModel**, то есть ngModelController.\\
+Создайте функцию связывания, которая принимает несколько аргументов, где четвертый аргумент, **mCtrl**, это **ngModelController**,\\
+Затем укажите функцию, в данном случае с именем **myValidation**, которая принимает один аргумент, этот аргумент является значением входного элемента.\\
+Проверьте, содержит ли значение букву «e», и установите допустимость контроллера модели на **true** или **false**.\\
+Наконец, **mCtrl.$Parsers.push(myValidation);** добавит функцию **myValidation** в массив других функций, которые будут выполняться каждый раз, когда изменяется входное значение.
+====Пример валидации====
+<code html>
+ <!DOCTYPE html>
+<html>
+<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
+<body>
+<h2>Validation Example</h2>
+<form  ng-app="myApp"  ng-controller="validateCtrl"
+name="myForm" novalidate>
+<p>Username:<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>Email:<br>
+  <input type="email" name="email" ng-model="email" required>
+  <span style="color:red" ng-show="myForm.email.$dirty && myForm.email.$invalid">
+  <span ng-show="myForm.email.$error.required">Email is required.</span>
+  <span ng-show="myForm.email.$error.email">Invalid email address.</span>
+  </span>
+</p>
+<p>
+  <input type="submit"
+  ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||
+  myForm.email.$dirty && myForm.email.$invalid">
+</p>
+</form>
+<script>
+var app = angular.module('myApp', []);
+app.controller('validateCtrl', function($scope) {
+  $scope.user = 'John Doe';
+  $scope.email = 'john.doe@gmail.com';
+});
+</script>
+</body>
+</html>
+</code>
+<note>
+Атрибут HTML-формы **novalidate** используется для отключения проверки браузера по умолчанию.
+</note>
+Директива AngularJS **ng-model** связывает входные элементы с моделью.\\
+Объект модели имеет два свойства: **user** и **email**.\\
+Из-за **ng-show** диапазоны с color: red отображаются только тогда, когда пользователь или электронная почта имеют значение **$dirty** и **$invalid**.

Инструменты пользователя

Инструменты сайта

Различия

Инструменты страницы