Angularjs входная проверка
AngularJS формы и элементы управления могут проверять входные данные.
Введите проверку
В предыдущих главах вы узнали об формах и контроле AngularJS.
Ангулярные формы и элементы управления могут предоставить возможности проверки и предупреждать незаконные данные, введенные пользователями.
Примечание. Проверка клиента не может обеспечить безопасность пользовательских входных данных, поэтому также необходима проверка данных на сервере.
Код приложения
<! Doctype html> <html> <head> <meta charset = "utf-8"> <script src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <hody> <h2. ng-controller = "valyatectrecter" name = "myform" novalidate> <p> имя пользователя: <br> <input type = "text" name = "user" ng-model = "user" требуется> <span style = "color: red" ng-show = "myform.user. $ dirty && myform.user. $ venalid"> <prop ng-show = "$" $ "$". Имя пользователя требуется. </span> </span> </p> <p> Электронная почта: <br> <input type = "email" name = "email" ng-model = "email" reply> <span style = "color: red" ng-shef = "myform.email. $ dirty && myform.email. $ Invalid"> <span ng-show = "myform.email. </span> <span ng-show = "myform.email. $ error.email"> Незаконный адрес электронной почты. </span> </span> </p> <p> <input type = "supper" ng-disabled = "myform.user. $ dirty && myform.user. $ Invalid || myform.email. $ dirty && myform.email. $ Invalid"> </p> </form> <script> var app = angular.mular. function ($ scope) {$ scope.user = 'John Doe';Результаты работы:
Пример проверки
имя пользователя:
Почта:
ПРИМЕЧАНИЕ. Атрибут формы HTML Novalidate используется для отключения проверки по умолчанию браузера.
Пример анализа
Директива angularjs ng-model используется для привязки входных элементов в модель.
Объект модели имеет два свойства: пользователь и электронная почта.
Мы использовали директиву NG-SHOW, цвет: красный отображается только в том случае, если сообщение грязно или $ недействительно.
| свойство | описывать |
|---|---|
| $ Dirty | Есть записи для заполнения формы |
| $ Действительно | Полевой контент является законным |
| $ недействителен | Полевое содержание является незаконным |
| $ PRIDINE | Запись не заполнена в форме |
Выше представляет собой сборник информации о входной проверке AngularJS. Мы продолжим дополнять его позже. Я надеюсь, что это может помочь студентам, которые учится.