Инструкции по проверке общей формы
1. Требуемая проверка
Заполнен ли вход формы, просто добавьте тег HTML5, необходимый для элемента поля ввода:
Скопируйте код следующим образом: <input type = "text" требуется />
2. Минимальная длина
Убедитесь, что длина текста ввода формы больше, чем определенное минимальное значение, и используйте инструкцию ng-minleng = "{number}" в поле ввода:
Скопируйте код следующим образом: <input type = "text" ng-minlength = "5" />
3. максимальная длина
Убедитесь, что длина текста ввода формы меньше или равна определенному максимальному значению, и используйте инструкцию ng-maxlength = "{number}" в поле ввода:
Скопируйте код следующим образом: <input type = "text" ng-maxlength = "20" />
4. Сопоставление рисунков
Используйте ng-pattern = "/pattern/", чтобы убедиться, что вход соответствует указанному регулярному выражению:
Скопируйте код кода следующим образом: <input type = "text" ng-pattern = "/[a-za-z]/"/>
5. Электронная почта
Убедитесь, что входной контент - это электронная почта, просто установите тип ввода на электронную почту, как ниже:
Скопируйте код следующим образом: <input type = "email" name = "email" ng-model = "user.email" />
6. Числа
Убедитесь, что входной содержимое является номером, и установите тип ввода на номер:
Скопируйте код следующим образом: <input type = "number" name = "age" ng-model = "user.age" />
7. URL
Убедитесь, что входной содержимое является URL и установите тип ввода на URL:
Скопируйте код следующим образом: <input type = "url" name = "homepage" ng-model = "user.facebook_url" />
Давайте проверим эти проверки формы в конкретных реализациях:
<div> <form rol = "form"> <div> <div> <label for = "name"> 1. required </label> </div> <div> <input id = "name" type = "text" требуется ng-model = 'user.name'/> </div> </div> <div> <div> <label for = "minlength"> 2. Minimum length=5</label> </div> <div> <input type="text" id="minlength" ng-minlength="5" ng-model="user.minlength" /> </div> </div> <div> <label for="minlength">3.Maximum length=20</label> </div> <div> <input type="text" ng-model = "user.maxlength" ng-maxlength = "20"/> </div> </div> <div> <div> <метка для = "minlength"> 4. Соответствие шаблона </label> </div> <div> <input type = "text" id = "minlength" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> </div> </div> <div> <div> <label for = "Email"> 5. Электронная почта </label> </div> </div> <div> <метка для = "Электронная почта"> 5. Электронная почта </label> </div> <div> <input type = "email" id = "email" name = "email" ng-model = "user.email"/> </div> </div> <div> <div> <label for = "age"> 6. Номер </label> </div> <div> <input type = "number" id = "age" name = "age" ng-model = "user.age"/> </div> </div> <div> <div> <label для = "url"> 7. url </label> </div> <div> <input = "url" = "url" url "=" ung-model ". </div> </div> <div> <input type = "Отправить" value = "pospent"/> </div> </form> </div> <div> 1. Требуемые поля: {{user.name}} <br> 2. min. Length = 5: {{user.minlength}} <br> 3. Maximum length = 20: {{user.maxlength}} <br> 4. Сопоставление шаблона: {{user.pattern}} <br> 5. Электронная почта: {{user.email}} <br> 6. 7.URL: {{user.url}} <br> </div>В тесте мы обнаружили, что двустороннее связывание будет выполняться в реальном времени только тогда, когда выражение удовлетворяет проверку. В то же время мы также обнаружили, что визуализации следующие:
Похоже, ничего не произошло, но если мы перенесем его в браузер с командой проверки HTML5, которая не очень хороша, давайте проверим его [IE9 в этом примере], проблема в том, что некоторые поля вообще не подтверждаются.
Фактически, в приведенном выше примере мы использовали проверку HTML5 и собственную проверку NG для ее объединения. Он не поддерживает проверку HTML5, но бесплатная проверка NG хорошо работает. Решение очень простое. Вы можете использовать соответствие шаблонов для решения этих ситуаций, или вы можете настроить инструкции по проверке для переписывания или переопределения правил проверки.
Заблокировать поведение проверки по умолчанию браузера для форм
Просто добавьте тег Novalidate в элемент формы. Вопрос в том, как мы узнаем, какие поля в нашей форме действительны, а какие вещи незаконны или недействительны? NG также предоставляет для этого отличное решение. Свойства формы можно получить в объекте $ accope, к которому она принадлежит, и мы можем получить доступ к объекту $ scope, чтобы JavaScript может косвенно получить доступ к свойствам формы в DOM. С этими свойствами мы можем реагировать в режиме реального времени на форму.
Эти свойства можно получить с помощью формата formname.inputfieldname.property.
Немодифицированная форма
Логическое свойство, указывающее, изменил ли пользователь форму. Если это Ture, это означает, что она не была изменена; Неверно означает, что он был изменен:
Кода кода следующая: formname.inputfieldname. $ Pristine; модифицированная форма
Логическое свойство, если и только тогда, когда пользователь фактически изменил форму. Независимо от того, проверена ли форма или нет:
Кода кода следующая: formname.inputfieldname. $ Dirty
Проверенная форма
Логическое свойство, которое указывает, прошла ли форма проверку. Если форма проверена в настоящее время, это будет правдой:
Код копии следующим образом: formname.inputfieldname. $ Действительно код копии следующим образом: formname.inputfieldname. $ Invalid
Последние два свойства особенно полезны при использовании для отображения или скрытия элемента DOM. В то же время они также очень полезны, если вы хотите настроить конкретный класс.
ошибка
Это еще одно очень полезное свойство, предоставляемое AngularJS: объект ошибки $. Он содержит все содержание проверки текущей формы, а также информацию о том, являются ли они законными. Доступ к этому свойству, используя следующий синтаксис
Кода кода следующая: formname.inputfieldname. $ Ошибка
Если проверка не удается, значение этого свойства верно; Если значение является ложным, это означает, что значение поля ввода прошло проверку.
Ниже мы проверяем эти инструкции по проверке:
<! Doctype html> <html ng-app = "mytest"> <head> <meta name = "viewport" content = "width = width"/> <title> index </title> <link href = "~/content/css/bootstrap.min.css" rel = "stolesheet"/> <script. src = "~/javascript/angular.min.js"> </script> <style type = "text/css"> body {padding-top: 30px; } </style> </head> <body ng-controller = "myController"> <div> <form rol = "form" name = "myform" ng-submit = "Отправить форму (myform. $ valive)" novalidate> <div> <div> <label for = "name"> 1. required </label> </div> <div> <input yd = "name" = "name" = "" name "=" "name" = "" name "=" name "" = "" "/" ""/" ng-model = 'user.name'/> <span ng-show = "myform.name. $ dirty && myform.name. $ valive"> </span> </div> </div> <div> <div> <label for = "minlength"> 2. Минимальная длина = 5 </label> </div> <div> <input type = "text" id = "minlength" name = "minlength" ng-minlength = "5" ng-model = "user.minlength"/> <span ng-show = "myform.minlength. $ Dirty && myform.minlength. для = "maxlength"> 3.maximum length = 20 </label> </div> <div> <input type = "text" id = "maxlength" name = "maxlength" ng-model = "user.maxlength" ng-maxlength = "20"/> <span ng-shefe = "myform.maxlength. </div> <div> <div> <метка для = "шаблона"> 4. Соответствие шаблона </label> </div> <div> <input type = "text" id = "pattern" name = "pattern" ng-model = "user.pattern" ng-pattern = "/^[a-za-z]*/d $/"/> <span ng-show = "myform.pattern. $ Diver. <Метка для = "Электронная почта"> 5. Электронная почта </label> </div> <div> <input type = "email" id = "email" name = "email" ng-model = "user.email"/> <span ng-show = "myform.email. $ Dirty && myform.email. $ Allive"> </span> </div> </div> <div> <div> <label для = "> 6. Номер </label> </div> <div> <input type = "number" id = "age" name = "age" ng-model = "user.age"/> <span ng-shef = "myform.age. $ Dirty && myform.age. $ Valive"> </span> </div> </div> <div> <label for = "url"> 7 ... id="url" name="url" ng-model="user.url" /> <span ng-show="myForm.url.$dirty && myForm.url.$valid"></span> </div> </div> <div> <input ng-disabled="myForm.$invalid" type="submit" /> </div> </form> </div> <div> 1. Required fields: {{user.name}} $ pristine [не модифицирован]: {{myform.name. $ pristine}} $ dirty [modified]: {{myform.name. $ Dirty}} $ Invalid [проверка не удалась]: {{myform.name. $ Invalid}} $ Invalid [verififive uppers]: {{{{{{{{{{{{{{{$ valive wersform]: {{{{{{{{{{{{$ vallize wersform]. Обязательно: {{myform.name. $ error.required}} <br> 2. Минимум длиной = 5: {{user.minlength}} $ {{myform.minlength. $ Invalid}} $ Invalid 【проверка Успешная】: {{myform.minlength. $ Valid}} $ ошибка 【Информация об ошибке】: {{myform.minlength. $ ошибка}} <br> 3. {{myform.maxLength. $ Pristine}} $ Dirty 【Modified】: {{myform.maxlength. $ Dirty}} $ Invalid 【Проверка не удалась】: {{myForm.maxLength. {{myForm.maxlength.$error}}<br> 4. Pattern matching: {{user.pattern}} $pristine 【Not modified】: {{myForm.pattern.$pristine }} $dirty【Modified】: {{myForm.pattern.$dirty}} $invalid【Verification failed】: {{myform.pattern. $ Invalid}} $ Invalid 【проверка успешная】: {{myform.pattern. $ Invalid}} $ Ошибка 【Информация об ошибке】: {{myform.pattern. $ error}} <br> 5. email: {{user.email}} $ ristine 【【【【【【【【【【wired 【】: {{myform.email. $ Pristine}} $ Dirty 【Modified】: {{myform.email. $ Dirty}} $ Invalid 【Проверка не удастся】: {{myform.email. $ Invalid}} $ Invalid 【Успешная】: {{myForm.email. $ valid} $ ruer 【【【【【【【【【【【【【【【【】】】】 【【】】】: {{myform.email. $ error}} <br> 6. number: {{user.age}} $ pristine 【Не изменен】: {{myform.age. $ pristine}} $ Dirtified 【】: {{myForm.age. $ Dirty} $ vendif $ неверная 【проверка успешная】: {{myform.age. $ valid}} $ ошибка 【Информация об ошибке】: {{myform.age. $ error}} <br> 7.URL: {{user.url}} $ PRIDINE 【Не изменен】: {{{myForm.Url. {{myform.url. $ Dirty}} $ Invalid 【Проверка не удалась】: {{myform.url. $ Invalid}} $ Invalid 【verification Успешная】: {{myform.url. $ valive}} $ ошибка 【【【】: {{myForm.Url. $ erfor}} <br11111 <BR> </div> </div> </div> </div> </div> </div> </div> </div> </div> </div. </body> </html> <script type = "text/javascript"> angular.module ('mytest', []) .controller ('myController', function ($ scope) {$ scope.submitform = function (isvalid) {if (! isvalid) {alert ('verification);Эффекты следующие:
В то же время NG установил несколько стилей CSS для этих инструкций по проверке целевым образом.
Они включают в себя:
Кодевая копия следующая: .ng-valid {} .ng-invalid {} .ng-pristine {} .ng-dirty {}/ * действительно специфические правила CSS, применяемые Angular */. Ng-invalid-required {} .ng-invalid-mindlegen
Они соответствуют конкретному состоянию поля ввода формы.
Например, когда вход в поле является незаконным, в этом поле будет добавлен класс .ng-Invlid. Вы можете редактировать свой любимый CSS. Вы можете настроить эти классы в частном порядке для реализации конкретных приложений сценариев.
Тем не менее, инструкции по проверке по умолчанию могут не в состоянии полностью соответствовать нашим сценариям приложений, а функции пользовательских инструкций по проверке также предоставляются NG.
Во -первых, давайте посмотрим на простой пример:
angular.module ("mytest", []) .directive ('MultipeMail', [function () {return {retember: "ngmodel", ссылка: функция (сфера, элемент, attr, ngmodel) {if (ngmodel) {var emailgexp = /^(ma-z0-9!#$%&'tr+//=?^_` <| ° С.-× NGMODEL.Код страницы HTML заключается в следующем:
<form rol = "form" id = "custom_form" name = "custom_form" nehopiate> <div> <babel> Несколько электронного письма < /label> <div> <input name name = "user_email" ng-model = "user.email" требуется Placeholder = "Custom Verification, множественные адреса электронной почты, разделение с" или ";";> verification verifice: {{cust. </div> </div> <div> <input ng-disablet = "custom_form. $ Invalid" type = "value =" pospo "/> </div> </form>Код очень прост, и эффект выглядит следующим образом:
Этот код очень прост, но включает в себя несколько важных свойств NgmodelController. $ viewValue
Свойство $ viewValue содержит фактическую строку, необходимую для обновления представления.
$ MODELVALUE
$ modelValue поддерживается моделью данных. $ modelValue и $ viewValue могут отличаться в зависимости от того, работает ли на нем трубопровод $ parser.
$ Парсеры
Стоимость анализаторов $ - это массив, состоящий из функций. Когда пользователь взаимодействует с контроллером, и называется метод $ setViewValue () в ngmodelController, функции в ngmodelController называются один за другим, когда пользователь взаимодействует с контроллером, а метод $ setViewValue () в NgmodelControler вызывается одним из форм в форме кончики. Значение, считанное NGModel из DOM , передается в функцию в $ Parsers и обрабатывается анализатором в последовательности. Это для обработки и изменения значений.
Примечание. Функция ngmodel. $ SetViewValue () используется для установки значения представления в области области.
Функция ngmodel. $ SetViewValue () может принять параметр.
value (String): параметр значения - это фактическое значение, которое мы хотим присвоить экземпляру NGModel.
Этот метод обновляет локальный $ viewValue на контроллере и передает значение каждой функции анализатора $ (включая валидатор). Когда значение проанализировано и все функции в трубопроводе $ parser вызываются, значение будет назначено свойству $ modelValue и передано выражению, предоставленному свойством NG-Model в инструкции. Наконец, после завершения всех шагов все слушатели в $ ViewChangelistenerers будут вызваны. Обратите внимание, что вызов $ setViewValue () только не будет вызывать новую цикл дигеста, поэтому, если вы хотите обновить директиву, вам необходимо вручную запустить дайджест после установки $ viewValue. Метод $ setViewValue () подходит для прослушивания пользовательских событий в пользовательских директивах (например, использование плагина jQuery с функциями обратного вызова), мы хотели бы установить $ viewValue и выполнить петли дигеста при вызове.
$ formatters
Значение $ Formatters - это массив функций, которые называются один за другим в форме трубопровода, когда изменяется значение модели данных. Он не влияет на трубопровод $ parser и используется для форматирования и преобразования значений для отображения в элементах управления с этим ограничением значения.
$ viewChangelisteners
Стоимость $ viewChangelisteners - это множество функций, которые называются одной за другим в форме трубопровода, когда изменение значения в представлении. С $ viewChangelisteners аналогичное поведение может быть достигнуто без использования $ watch. Поскольку возвратное значение игнорируется, эти функции не должны возвращать значения.
$ ошибка
Объект ошибки $ содержит имя валидатора, которое не прошло проверку и соответствующую информацию об ошибке.
$ PRIDINE
Стоимость $ Prineine является логическим, что может сказать нам, изменил ли пользователь элемент управления.
$ Dirty
Стоимость $ Dirty - это противоположность $ Prineine, которая может сказать нам, взаимодействовал ли пользователь с элементом управления.
$ Действительно
Допустимое значение $ сообщает нам, есть ли ошибки в текущем элементе управления. Значение неверно, когда есть ошибка, и значение верно, когда нет ошибки.
$ недействителен
Неверное значение $ сообщает нам, есть ли хотя бы одна ошибка в текущем элементе управления, и его значение противоположна достоверной $.
После изучения основных знаний, вам необходимо глубоко изучить метод написания пользовательской проверки. После NG1.3 легкость использования инструкций по проверке была улучшена.
Выше приведено подробное объяснение примеров использования формы проверки AngularJS, введенной вам редактором. Надеюсь, это может вам помочь. Я буду продолжать обновлять соответствующие знания о форме проверки AngularJS в будущем. Пожалуйста, обратите внимание на веб -сайт wulin.com!