Валидация форм AngularJS

Предыдущая страница Формы AngularJS
Следующая страница API AngularJS

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

Валидация форм

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

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

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

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

Клиентская валидация не может полностью защитить ввод пользователя. Требуется также валидация на сервере.

required

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

экземпляр

Это поле ввода обязательно:

<form name="myForm">  
  <input name="myInput" ng-model="myInput" required>  
</form>  
<p>Эффективное состояние ввода:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Попробуйте сами

email

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

экземпляр

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

<form name="myForm">  
  <input name="myInput" ng-model="myInput" type="email">  
</form>  
<p>Эффективное состояние ввода:</p>  
<h1>{{myForm.myInput.$valid}}</h1>

Попробуйте сами

Состояние формы и состояние поля ввода

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

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

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

Они все являются свойствами поля ввода и могут быть правдой или лжи.

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

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

Они все являются свойствами формы и могут быть правдой или лжи.

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

экземпляр

Если поле было коснуто и пусто, то отображается сообщение об ошибке:

<input name="myName" ng-model="myName" required>  
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">Имя - обязательное поле.</span>

Попробуйте сами

CSS-классы

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

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

ng-untouched Это поле еще не было коснуто
ng-touched Это поле было коснuto
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 для применения стилей:

<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 ссылаться на него.

Это поле активно только когда значение содержит символ "e":

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

Попробуйте сами

Example Explained:

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

В JavaScript, мы сначала добавляем имя myDirective новой директивы.

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

Затем верните объект, в котором указываем, что нам нужно ngModelто есть ngModelController.

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

Затем определить функцию, в данном примере назовем её myValidationон принимает один параметр, это значение элемента ввода.

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

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

验证示例

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<h2>验证示例</h2>
<form ng-app="myApp"  ng-controller="validateCtrl"
name="myForm" novalidate>
<p>用户名：<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">用户名是必填项。<
  </span>
</p>
<p>电子邮件：<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">电子邮件是必填项。</span>
  <span ng-show="myForm.email.$error.email">无效的电子邮件地址。</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 = 'Bill Gates';
  $scope.email = 'bill.gates@gmail.com';
});
</script>
</body>
</html>

Попробуйте сами

Атрибуты HTML-формы novalidate Для禁ирования-default браузерной валидации.

Пример объяснения:

Инструкции AngularJS ng-model Привязка вводного элемента к модели.

Модельный объект имеет два свойства:user и email.

из-за ng-showтолько когда user или email $dirty и $invalid Только при этом условии будут отображаться spans с color:red.

Предыдущая страница Формы AngularJS
Следующая страница API AngularJS

Расписание курсов

Учебное пособие

экземпляр

Референсное руководство

Выборные курсы

Рекомендации по курсам:

Валидация форм AngularJS