Последние учебники веб-разработки
 

AngularJS Форма проверки

❮ Предыдущая Следующая Глава ❯

AngularJS может проверять входные данные.

Форма проверки

AngularJS предлагает форму проверки на стороне клиента.

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

AngularJS также содержит информацию о том, были ли они соприкоснулись, или изменения, или нет.

Вы можете использовать стандартные атрибуты HTML5 для проверки вводимых данных, или вы можете сделать свои собственные функции проверки.

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

необходимые

Используйте атрибут HTML5 , required , чтобы указать , что поле ввода должно быть заполнено:

пример

Требуется поле ввода:

<form name="myForm">
<input name="myInput" ng-model="myInput" required>
</form>

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>
Попробуй сам "

Эл. почта

Используйте тип HTML5 email , чтобы указать , что значение должно быть по электронной почте:

пример

Поле ввода должно быть электронная почта:

<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>
Попробуй сам "

Форма государства и Положение входа

AngularJS постоянно обновляет состояние как формы, так и полей ввода.

Поля ввода имеют следующие состояния:

  • $untouched Поле еще не прикоснулся
  • $touched поле была затронута
  • $pristine Поле еще не изменен
  • $dirty поле было изменено
  • $invalid Содержимое поля не является действительным
  • $valid Содержание поля является действительным

Они все свойства поля ввода, и являются либо true или false .

Формы имеют следующие состояния:

  • $pristine Никакие поля пока не изменен
  • $dirty Один или несколько были изменены
  • $invalid Содержание формы не является действительным
  • $valid Содержание формы действительна
  • $submitted форма была отправлена

Они все свойства формы, и являются либо true или false .

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

пример

Показать сообщение об ошибке, если поле была затронута и пуста:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>
Попробуй сам "

CSS классы

AngularJS добавляет классы CSS для форм и полей ввода в зависимости от их состояния.

Следующие классы добавляются или удаляются из, поля ввода:

  • ng-untouched поле еще не прикоснулся
  • ng-touched поле была затронута
  • ng-pristine Поле еще не изменен
  • ng-dirty поле было изменено
  • ng-valid Содержание поле действительно
  • ng-invalid Содержание поле не действует
  • ng-valid- key Один ключ для каждой проверки. Пример: ng-valid-required окончания ng-valid-required , полезно , когда есть больше чем одна вещь , которая должна быть подтверждена
  • ng-invalid- key - Пример: ng-invalid-required

Следующие классы добавляются или удаляются из, форм:

  • ng-pristine Никакие поля не до сих пор не изменен
  • ng-dirty Одно или несколько полей были изменены
  • ng-valid Содержание формы действительна
  • ng-invalid Содержание форма не действительна
  • ng-valid- key Один ключ для каждой проверки. Пример: ng-valid-required окончания ng-valid-required , полезно , когда есть больше чем одна вещь , которая должна быть подтверждена
  • ng-invalid- key - Пример: ng-invalid-required

Классы будут удалены , если значение они представляют это false .

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

пример

Применение стилей, используя стандартные CSS:

<style>
input.ng-invalid {
    background-color: pink;
}
input.ng-valid {
    background-color: lightgreen;
}
</style>
Попробуй сам "

Формы могут быть также стиле:

пример

Применение стилей для немодифицированных (нетронутых) форм, а также для модифицированных форм:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Попробуй сам "

Пользовательские проверки

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

пример

Создайте свою собственную директиву, содержащую пользовательскую функцию проверки, и ссылаться на него, используя my-directive .

Поле будет только справедливо, если значение содержит символ "е":

<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>
Попробуй сам "

Пример Разъяснения:

В HTML, новая директива будет называться с помощью атрибута my-directive .

В JavaScript мы начинаем, добавив новую директиву под названием myDirective .

Помните, что при именовании директиву, вы должны использовать имя ГорбатыйРегистр, myDirective , но при вызове, вы должны использовать - отдельное название, my-directive .

Затем, возвращает объект , где вы указываете , что мы требуем ngModel , которая является ngModelController.

Сделать функцию связывания , которая принимает некоторые аргументы, где четвертый аргумент, mCtrl , является ngModelController ,

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

Тест , если значение содержит букву "е", а также установить срок действия контроллера модели либо true или false .

В конце концов, mCtrl.$parsers.push(myValidation); Добавит myValidation функцию массив других функций, которые будут выполняться каждый раз при изменении входного значения.

Валидация Пример

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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 = '[email protected]';
});
</script>

</body>
</html>
Попробуй сам "
Заметка Атрибут форма NOVALIDATE HTML используется для отключения проверки браузера по умолчанию.

Пример Разъяснения

Директива AngularJS нг-модель связывает входные элементы модели.

Объект модель имеет два свойства: пользователь и адрес электронной почты.

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


❮ Предыдущая Следующая Глава ❯