Najnowsze tutoriale tworzenie stron internetowych
 

AngularJS Walidacja formularza

❮ Poprzedni Następny Rozdział ❯

Angularjs może zweryfikować dane wejściowe.

Walidacja formularza

Angularjs oferuje walidacji formularza po stronie klienta.

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

Angularjs posiada również informacje na temat tego, czy zostały one dotknął lub modyfikacji, czy też nie.

Możesz użyć atrybutów standardem HTML5, aby potwierdzić wejście, można też tworzyć własne funkcje sprawdzania poprawności.

Uwaga walidacja po stronie klienta nie może sama bezpieczne wejście użytkownika. Walidacja po stronie serwera jest również konieczne.

wymagany

Użyj atrybutu HTML5 required , aby określić, że pole wejściowe należy wypełnić:

Przykład

Pole wejściowe są 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>
Spróbuj sam "

E-mail

Użyj typu HTML5 email , aby określić, że wartość musi być adres e-mail:

Przykład

Pole wejściowe musi być adres 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>
Spróbuj sam "

Forma państwa i stan wejścia

Angularjs jest stale uaktualniania stanu zarówno w formie i pól wejściowych.

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

  • $untouched pole nie zostało jeszcze dotknął
  • $touched Pole zostało dotknięte
  • $pristine Pole nie zostało jeszcze zmienione
  • $dirty Pole została zmodyfikowana
  • $invalid Zawartość pola nie jest ważny
  • $valid Zawartość pola jest ważna

Są wszystkie właściwości pola wejściowego, a są albo true albo false .

Formularze mają następujące stany:

  • $pristine Brak pola zostały jeszcze zmienione
  • $dirty Jeden lub więcej zostały zmodyfikowane
  • $invalid Zawartość forma nie jest ważna
  • $valid Zawartość forma jest ważna
  • $submitted formularz jest przesyłany

Są wszystkie właściwości postaci, i są albo true albo false .

Można korzystać z tych stanów, aby pokazać znaczące wiadomości do użytkownika. Przykładowo, jeśli pole jest wymagane, a użytkownik pozostawia puste, należy dać użytkownikowi ostrzeżenie:

Przykład

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

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

Klasy CSS

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

Poniższe klasy są dodawane lub usuwane z, pól wejściowych:

  • ng-untouched Pole nie zostało jeszcze dotknął
  • ng-touched Pole zostało dotknięte
  • ng-pristine Pole nie zostało jeszcze zmienione
  • ng-dirty Pole została zmodyfikowana
  • ng-valid Zawartość pola jest ważna
  • ng-invalid Zawartość pola nie jest ważna
  • ng-valid- key jeden klucz dla każdej walidacji. Przykład: ng-valid-required , przydatna, gdy istnieje więcej niż jedna rzecz, która musi być potwierdzona
  • ng-invalid- key Przykład: ng-invalid-required

Poniższe klasy są dodawane do lub wyjęty z formy:

  • ng-pristine Brak pola nie zostały jeszcze zmienione
  • ng-dirty jedno lub więcej pól został zmodyfikowany
  • ng-valid Zawartość forma jest ważna
  • ng-invalid Zawartość forma nie jest ważna
  • ng-valid- key jeden klucz dla każdej walidacji. Przykład: ng-valid-required , przydatna, gdy istnieje więcej niż jedna rzecz, która musi być potwierdzona
  • ng-invalid- key Przykład: ng-invalid-required

Klasy są usuwane, jeśli wartość reprezentują jest false .

Dodaj style dla tych klas, aby dać swojej aplikacji lepszego 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>
Spróbuj sam "

Formularze mogą być także stylu:

Przykład

Zastosuj style niemodyfikowanych (dziewiczych) tworzy, i zmodyfikowanych formach:

<style>
form.ng-pristine {
    background-color: lightblue;
}
form.ng-dirty {
    background-color: pink;
}
</style>
Spróbuj sam "

niestandardowe Validation

Aby utworzyć własną funkcję sprawdzania poprawności jest nieco bardziej skomplikowane. Trzeba dodać nową dyrektywę do aplikacji, oraz radzenia sobie z walidacji wewnątrz funkcji z pewnymi określonymi argumentami.

Przykład

Stwórz własną dyrektywy, zawierającego niestandardową funkcję walidacji, i odnoszą się do niego 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>
Spróbuj sam "

Przykład Poradnik:

W HTML, nowa dyrektywa będzie określany za pomocą atrybutu my-directive .

W JavaScripcie zaczniemy dodając nową dyrektywę o nazwie myDirective .

Pamiętaj, że podczas nadawania nazw dyrektywy, należy użyć nazwy liter wielbłąda, myDirective , ale podczas wywoływania go, należy użyć - oddzielone imię, my-directive .

Następnie wróć do obiektu, w którym można określić, które wymagają ngModel , która jest ngModelController.

Zrób funkcję łączącą, który trwa kilka argumentów, gdzie czwarty argument, mCtrl , jest ngModelController ,

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

Sprawdza, czy wartość zawiera literę "e" i ustaw ważność regulatora modelu albo true albo false .

W końcu, mCtrl.$parsers.push(myValidation); Doda myValidation funkcję do szeregu innych funkcji, która zostanie wykonana przy każdej zmianie wartości wejściowej.

Przykład Validation

<!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>
Spróbuj sam "
Uwaga HTML atrybut formą novalidate służy do wyłączenia domyślnego walidacji przeglądarki.

Przykład Poradnik

Dyrektywa angularjs ng model łączy elementy wejściowe do modelu.

Model ten obiekt posiada dwie właściwości: łatwość i e-mail.

Ze względu ng pojawienia przęsła z kolor: czerwony są wyświetlane tylko wtedy, gdy użytkownik lub e-mail jest $ brudne i $ nieprawidłowy.


❮ Poprzedni Następny Rozdział ❯