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

Walidacja formularza AngularJS

❮ Poprzedni Następny ❯

AngularJS może sprawdzać dane wejściowe.

Walidacja formularza

AngularJS oferuje walidację formularzy po stronie klienta.

AngularJS monitoruje stan formularza i pól wejściowych (input, textarea, select) i pozwala powiadomić użytkownika o aktualnym stanie.

AngularJS przechowuje również informacje o tym, czy zostały dotknięte, zmodyfikowane, czy nie.

Możesz użyć standardowych atrybutów HTML5 do walidacji danych wejściowych lub możesz stworzyć własne funkcje walidacji.

Walidacja po stronie klienta nie może sama zabezpieczyć danych wejściowych użytkownika. Konieczna jest również walidacja po stronie serwera.

Wymagany

Użyj atrybutu HTML5 required, aby określić, że pole wejściowe musi być wypełnione:

Przykład

Pole wejściowe jest wymagane:

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

<p>The input's valid state is:</p>
<h1>{{myForm.myInput.$valid}}</h1>

E-mail

Użyj typu HTML5, emailaby określić, że wartość musi być adresem e-mail:

Przykład

Pole wejściowe musi być adresem e-mail:

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

Stan formularza i stan wejścia

AngularJS stale aktualizuje stan zarówno formularza, jak i pól wejściowych.

Pola wejściowe mają następujące stany:

  • $untouched Pole nie zostało jeszcze dotknięte
  • $touched Pole zostało dotknięte
  • $pristine Pole nie zostało jeszcze zmodyfikowane
  • $dirty Pole zostało zmodyfikowane
  • $invalid Zawartość pola jest nieprawidłowa
  • $valid Zawartość pola jest prawidłowa

Wszystkie są właściwościami pola wejściowego i są albo true lub false.

Formularze mają następujące stany:

  • $pristineŻadne pola nie zostały jeszcze zmodyfikowane
  • $dirtyCo najmniej jeden został zmodyfikowany
  • $invalidTreść formularza jest nieprawidłowa
  • $validTreść formularza jest prawidłowa
  • $submittedFormularz został przesłany

Wszystkie są właściwościami formy i są albo true lub false.

Możesz użyć tych stanów, aby pokazać użytkownikowi znaczące komunikaty. Na przykład, jeśli pole jest wymagane, a użytkownik pozostawi je puste, należy ostrzec użytkownika:

Przykład

Pokaż komunikat o błędzie, jeśli pole zostało dotknięte ORAZ jest puste:

<input name="myName" ng-model="myName" required>
<span ng-show="myForm.myName.$touched && myForm.myName.$invalid">The name is required.</span>

Klasy CSS

AngularJS dodaje klasy CSS do formularzy i pól wejściowych w zależności od ich stanów.

Następujące klasy są dodawane lub usuwane z pól wejściowych:

  • ng-untouched Pole nie zostało jeszcze dotknięte
  • ng-touched Pole zostało dotknięte
  • ng-pristine Pole nie zostało jeszcze zmodyfikowane
  • ng-dirty Pole zostało zmodyfikowane
  • ng-valid Zawartość pola jest prawidłowa
  • ng-invalid Zawartość pola jest nieprawidłowa
  • ng-valid-keyJeden klucz do każdej walidacji. Przykład: ng-valid-required, przydatne, gdy istnieje więcej niż jedna rzecz, która musi zostać zweryfikowana
  • ng-invalid-key Przykład: ng-invalid-required

Następujące klasy są dodawane do formularzy lub z nich usuwane:

  • ng-pristine Żadne pola nie zostały jeszcze zmodyfikowane
  • ng-dirty Zmodyfikowano jedno lub więcej pól
  • ng-validTreść formularza jest prawidłowa
  • ng-invalidTreść formularza jest nieprawidłowa
  • ng-valid-keyJeden klucz do każdej walidacji. Przykład: ng-valid-required, przydatne, gdy istnieje więcej niż jedna rzecz, która musi zostać zweryfikowana
  • ng-invalid-key Przykład: ng-invalid-required

Klasy są usuwane, jeśli reprezentowana przez nie wartość to false.

Dodaj style dla tych klas, aby zapewnić aplikacji lepszy i bardziej intuicyjny interfejs użytkownika.

Przykład

Zastosuj style, używając standardowego CSS:

<style>
input.ng-invalid {
  background-color: pink;
}
input.ng-valid {
  background-color: lightgreen;
}
</style>

Formularze można również stylizować:

Przykład

Zastosuj style dla niezmodyfikowanych (pierwotnych) form oraz dla zmodyfikowanych form:

<style>
form.ng-pristine {
  background-color: lightblue;
}
form.ng-dirty {
  background-color: pink;
}
</style>

Walidacja niestandardowa

Stworzenie własnej funkcji walidacji jest nieco trudniejsze; Musisz dodać nową dyrektywę do swojej aplikacji i zająć się walidacją wewnątrz funkcji z określonymi określonymi argumentami.

Przykład

Utwórz własną dyrektywę zawierającą niestandardową funkcję walidacji i odwołaj się do niej za pomocą my-directive.

Pole będzie ważne tylko wtedy, gdy wartość zawiera znak „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>

Przykład wyjaśniony:

W HTML do nowej dyrektywy będzie się odwoływać przy użyciu atrybutu my-directive.

W JavaScript zaczynamy od dodania nowej dyrektywy o nazwie myDirective.

Pamiętaj, że nazywając dyrektywę, musisz użyć nazwy wielbłąda, myDirective, ale przy jej wywoływaniu musisz użyć -oddzielnej nazwy, my-directive.

Następnie zwróć obiekt, w którym określisz, że wymagamy  ngModel, czyli ngModelController.

Utwórz funkcję łączącą, która przyjmuje kilka argumentów, gdzie czwartym argumentem mCtrl, jest ngModelController,

Następnie określ funkcję, w tym przypadku o nazwie myValidation, która przyjmuje jeden argument, ten argument jest wartością elementu input.

Sprawdź, czy wartość zawiera literę „e” i ustaw ważność kontrolera modelu na truelub false.

Na koniec mCtrl.$parsers.push(myValidation);doda myValidationfunkcję do tablicy innych funkcji, które będą wykonywane za każdym razem, gdy zmieni się wartość wejściowa.

Przykład walidacji

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

Atrybut formularza HTML novalidate służy do wyłączania domyślnej walidacji przeglądarki.

Przykład wyjaśniony

Dyrektywa AngularJS ng-model wiąże elementy wejściowe z modelem.

Obiekt modelu ma dwie właściwości: user i email .

Z powodu ng-show , span z color:red są wyświetlane tylko wtedy, gdy użytkownik lub adres e-mail jest $dirty i $invalid .


❮ Poprzedni Następny ❯