Angularjs sprawdzania poprawności danych wejściowych
Angularjs formy i kontrole mogą zweryfikować danych wejściowych.
sprawdzania poprawności danych wejściowych
W poprzednich rozdziałach, nauczyłeś się wiedzę o angularjs form i kontroli.
Angularjs formy i kontrole mogą oferować możliwości walidacji i nielegalnych danych wprowadzonych przez użytkownika zostanie ostrzeżenie.
 | Upewnij się, że klient nie może zapewnić bezpieczeństwo wprowadzania danych użytkownika, serwer walidacji danych jest konieczne. |
|---|
Kod aplikacji
<! DOCTYPE html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Przykład Validation </ h2 >
<Formularz ng-app = "myApp " NG-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Nazwa użytkownika: Największa
<Input type = "text" name = "user" ng model = "user" wymagane>
<Span style = "color: red " ng-show = ".. MyForm.user $ brudne && myForm.user $ nieważne">
<Span ng-show = "myForm.user . $ Error.required"> nazwa użytkownika jest konieczne. </ Span>
</ Span>
</ P>
<P> E-mail: Największa
<Wejście type = "email" name = "email" ng model = "email" wymagane>
<Span style = "color: red " ng-show = ".. MyForm.email $ brudne && myForm.email $ nieważne">
<Span ng-show = "myForm.email . $ Error.required"> poczta jest koniecznością. </ Span>
<span ng-show = "myForm.email . $ Error.email"> nielegalne skrzynek pocztowych. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ brudne && myForm.user. $ nieważne ||
myForm.email. $ brudne && myForm.email. $ nieważne ">
</ P>
</ Form>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "validateCtrl ', function ($ zakres) {
$ Scope.user = 'Jan Kowalski';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
<Html>
<Script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </ script>
<Body>
<H2> Przykład Validation </ h2 >
<Formularz ng-app = "myApp " NG-controller = "validateCtrl"
name = "myForm" novalidate>
<P> Nazwa użytkownika: Największa
<Input type = "text" name = "user" ng model = "user" wymagane>
<Span style = "color: red " ng-show = ".. MyForm.user $ brudne && myForm.user $ nieważne">
<Span ng-show = "myForm.user . $ Error.required"> nazwa użytkownika jest konieczne. </ Span>
</ Span>
</ P>
<P> E-mail: Największa
<Wejście type = "email" name = "email" ng model = "email" wymagane>
<Span style = "color: red " ng-show = ".. MyForm.email $ brudne && myForm.email $ nieważne">
<Span ng-show = "myForm.email . $ Error.required"> poczta jest koniecznością. </ Span>
<span ng-show = "myForm.email . $ Error.email"> nielegalne skrzynek pocztowych. </ Span>
</ Span>
</ P>
<P>
<Input type = "submit"
ng-disabled = "myForm.user. $ brudne && myForm.user. $ nieważne ||
myForm.email. $ brudne && myForm.email. $ nieważne ">
</ P>
</ Form>
<Script>
var app = angular.module ( "myApp", []);
app.controller ( "validateCtrl ', function ($ zakres) {
$ Scope.user = 'Jan Kowalski';
$ Scope.email = '[email protected]';
});
</ Script>
</ Body>
</ Html>
Spróbuj »
| Formularz HTML atrybuty novalidate wyłączania domyślną walidację w przeglądarce. |
|---|
Przykłady analityczne
Angularjs instrukcja ng model jest używany do wiązania elementów wejściowych do modelu.
Model obiektowy ma dwa atrybuty: użytkownika i adres e-mail.
Używamy ng-show polecenie, kolor: czerwony w komunikacie jest tylko $ brudne lub $ nieprawidłowe wyświetlanie.
| nieruchomość | opis |
|---|---|
| $ Brudny | Istnieją formy, aby wypełnić rekord |
| $ Ważny | Zawartość pól uzasadniony |
| $ Nieprawidłowy | zawartości pól są nielegalne |
| $ Krystalicznie | Brak formy, aby wypełnić rekord |