HTML CSS JAVASCRIPT SQL PYTHON PHP HOW TO W3.CSS JAVA JQUERY C++ R React
ภาษาไทย Afrikaans العربية čeština Deutsch Español Français हिन्दी Bahasa Indonesia Italiano 日本語 한국어 မြန်မာဘာသာ Nederlands Polski Português Русский Türkçe Tiếng Việt

Проверка формы 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-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>

Объяснение примера:

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

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

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

Затем верните объект, где вы укажете, что нам требуется  ngModel, который является ngModelController.

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

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

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

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

Пример проверки

<!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 = '[email protected]';
});
</script>

</body>
</html>

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

Объяснение примера

Директива AngularJS ng-model привязывает входные элементы к модели.

Объект модели имеет два свойства: user и email .

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


❮ Предыдущий Следующий ❯