Проверката е процес, който гарантира, че данните са верни и пълни.
В пример от реалния свят, нека приемем, че сайт, който изисква формуляр за регистрация, трябва да бъде попълнен, преди да получи пълен достъп до този сайт. Страницата за регистрация ще има полета за въвеждане на потребителско име, парола, имейл и т.н.
Когато потребителят изпрати формуляра, обикновено първо се извършва проверка, преди подробностите да бъдат изпратени на сървъра. Тази проверка ще се опита да осигури в най-добрата възможна степен, че данните за полетата за въвеждане са въведени по правилния начин.
Например имейл идентификаторът винаги трябва да бъде във формат на Този имейл адрес е защитен от спам ботове. Трябва да имате активиран JavaScript, за да го видите. ; ако някой въведе само потребителското име в имейл адреса, тогава в идеалния случай проверката трябва да се провали. Така валидирането разглежда извършването на тези основни проверки, преди подробностите да бъдат изпратени на сървъра за по-нататъшна обработка.
В този урок ще научите -
- Проверка на формуляра с помощта на HTML5
- Проверка на формуляра с помощта на $ dirty, $ valid, $ invalid, $ pristine
- Проверка на формуляра с помощта на AngularJS Auto Validate
- Отзиви на потребителите с бутони Ladda
Проверка на формуляра с помощта на HTML5
Проверката на формуляра е процес на предварителна проверка на информацията, въведена в уеб формуляр от потребителя, преди тя да бъде изпратена до сървъра. Винаги е по-добре да проверите информацията от самата страна на клиента. Това е така, защото добавя по-малко режийни разходи, ако на потребителя е трябвало да му бъде представен отново формуляр, ако въведената информация е грешна.
Нека да разгледаме как валидирането на формуляра може да се извърши в HTML5.
В нашия пример ще покажем на потребителя един прост формуляр за регистрация, в който той трябва да въведе подробности като потребителско име, парола, имейл адрес и възраст.
Формулярът ще има контроли за проверка, за да се гарантира, че потребителят въвежда информацията по правилен начин.
Event Registration Guru99 Global Event
Обяснение на кода:
- За типа въвеждане на текст използваме атрибута „задължителен“. Това означава, че текстовото поле не може да бъде празно при изпращане на формуляра и в него трябва да присъства някакъв текст.
- Следващият тип въвеждане е парола. Тъй като типът на въвеждане е маркиран като парола, когато потребителят въведе какъвто и да е текст в полето, той ще бъде маскиран.
- Тъй като типът на въвеждане е посочен като имейл, текстът в полето трябва да съответства на шаблона. Този имейл адрес е защитен от спам ботове. Трябва да имате активиран JavaScript, за да го видите. .
- Когато типът на въвеждане е маркиран като число, ако потребителят се опита да въведе някакъв символ с помощта на клавиатурата или азбуката, той няма да бъде въведен в текстовото поле.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
За да видите действието на проверката на формуляра, щракнете върху бутона Изпрати, без да въвеждате никаква информация на екрана.
След натискане на бутона за изпращане ще се появи изскачащ прозорец, показващ грешка при проверка, че полето трябва да бъде попълнено.
Така валидирането на контролата, която е маркирана като необходима, кара съобщението за грешка да се показва, ако потребителят не въведе никаква стойност в текстовото поле.
Когато потребителят въведе някаква стойност в контрола за парола, ще забележите символа '*', използван за маскиране на въведените символи.
След това нека въведем грешен идентификатор на имейл и щракнете върху бутона за изпращане След натискане на бутона за изпращане ще се появи изскачащ прозорец, показващ грешка при проверка, че полето трябва да има символа @.
Така валидирането на контролата, която е маркирана като имейл контрола, ще доведе до показване на съобщението за грешка, ако потребителят не въведе правилен имейл идентификатор в текстовото поле.
И накрая, когато се опитате да въведете някакви знаци в контрола за текст на възрастта, той няма да бъде въведен на екрана. Контролата ще се попълва със стойност само когато е въведено число в контролата.
Проверка на формуляра с помощта на $ dirty, $ valid, $ invalid, $ pristine
AngularJS предоставя допълнителните си свойства за проверка. AngularJS предоставя следните свойства за контроли за целите на валидирането
- $ dirty - Потребителят е взаимодействал с контролата
- $ valid - Съдържанието на полето е валидно
- $ invalid - Съдържанието на полето е невалидно
- $ pristine - Потребителят все още не е взаимодействал с контролата
По-долу са описани стъпките, които трябва да бъдат изпълнени за извършване на ъглова валидация.
Стъпка 1) Използвайте свойството no validate, когато декларирате формуляра. Това свойство казва на HTML5, че проверката ще бъде извършена от AngularJS.
Стъпка 2) Уверете се, че формулярът има определено име за него. Причината за това е, че при извършване на Angular валидиране ще се използва името на формуляра.
Стъпка 3) Уверете се, че всяка контрола също има определено име за нея. Причината за това е, че при извършване на Angular валидиране ще се използва контролното име.
Стъпка 4) Използвайте директивата ng-show, за да проверите за свойствата $ dirty, $ invalid и $ valid за контролите.
Нека разгледаме един пример, който включва гореспоменатите стъпки.
В нашия пример,
Просто ще имаме просто текстово поле, в което потребителят трябва да въведе име на тема в текстовото поле. Ако това не бъде направено, ще се задейства грешка при проверка и съобщението за грешка ще се покаже на потребителя.
Event Registration Guru99 Global Event
Обяснение на кода:
- Забележете, че сме дали име на формуляра, който е „myForm“. Това се изисква при достъп до контролите във формуляра за проверка на AngularJS.
- Използване на свойството "novalidate", за да се гарантира, че HTML формата позволява на AngularJS да извърши проверката.
- Използваме директивата ng-show, за да проверим за свойството "$ dirty" и "$ invalid". Това означава, че ако текстовото поле е модифицирано, тогава стойността на свойството "$ dirty" ще бъде вярна. Също така, в случаите, когато стойността на текстовото поле е нула, свойството "$ invalid" ще стане вярно. Така че, ако и двете свойства са верни, тогава проверката ще се провали за контролата. Следователно, ако и двете стойности са верни, ng-show също ще стане вярно и ще се покаже контролът за обхвата с червените цветни символи.
- В това ние проверяваме свойството "$ error", което също оценява на true, тъй като споменахме за контролата, че стойността трябва да бъде въведена за контролата. В такъв случай, когато в текстовото поле няма въведени данни, контролът за обхват ще покаже текста „Изисква се потребителско име“.
- Ако контролната стойност на текстовото поле е невалидна, ние също искаме да деактивираме бутона за изпращане, така че потребителят да не може да изпрати формуляра. Използваме свойството "ng-disabled" за контрола, за да направим това въз основа на условната стойност на свойството "$ dirty" и "$ invalid" на контролата.
- В контролера ние просто задаваме началната стойност на стойността на текстовото поле на текста „AngularJS“. Това се прави само за задаване на някаква стойност по подразбиране на текстовото поле, когато формулярът се показва за първи път. Той показва по-добре как се проверява за полето на текстовото поле.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
Когато формулярът се показва първоначално, текстовото поле показва стойността на "AngularJS" и е активиран "бутона за изпращане". Веднага след като премахнете текста от контролата, съобщението за грешка при проверка е активирано и бутонът Submit е деактивиран.
Горната екранна снимка показва две неща
- Бутонът за изпращане е деактивиран
- В текстовото поле на тема няма име на тема. Следователно тя задейства съобщението за грешка „Изисква се потребителско име“.
Проверка на формуляра с помощта на AngularJS Auto Validate
В AngularJS има средство за автоматично валидиране на всички контроли във формуляр, без да е необходимо да се пише персонализиран код за валидиране. Това може да стане чрез включване на персонализиран модул, наречен „jcs-AutoValidate“.
С този модул на място не е необходимо да поставяте специален код, за да извършите проверката или да покажете съобщенията за грешка. Всичко това се обработва от кода вътре в JCS-AutoValidate.
Нека разгледаме един прост пример за това как да постигнем това.
В този пример
Ние просто ще имаме проста форма с контрол на текстово поле, което е задължително поле. Ако този контрол не е попълнен, трябва да се покаже съобщение за грешка.
Event Registration Guru99 Event
Обяснение на кода:
- Първо, трябва да включим скрипта "jcs-auto-validate.js", който има всички функции за автоматично потвърждаване.
- Трябва да гарантираме, че всеки елемент, включително "тага div", се поставя в клас "form-group".
- Също така трябва да се гарантира, че всеки елемент (който е HTML елемент като контрол на входа, контрол на обхвата, контрол div и така нататък) като контролите за въвеждане също се поставя в класа на групата на формулярите.
- Включете jcs-autovalidate във вашия модул AngularJS JS.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
По подразбиране, когато стартирате кода си, горният формуляр ще бъде показан според HTML кода.
Ако се опитате да изпратите формуляра, ще се появи съобщението за грешка, казвайки: "Това поле е задължително." Всичко това се прави от опцията JCS-AutoValidate.
Отзиви на потребителите с бутони Ladda
Бутоните "ladda" са специална рамка, изградена за бутони в горната част на JavaScript, за да придаде визуален ефект на бутоните при натискане.
Така че, ако на бутон е даден атрибут "ladda" и бъде натиснат, ще се покаже ефект на завъртане. Освен това за бутона са налични различни стилове данни, за да се осигурят допълнителни визуални ефекти.
Нека разгледаме един пример за това как да видите бутоните "ladda" в действие. Ние просто ще видим прост формуляр, който има бутон за изпращане. При натискане на бутона на бутона ще се покаже ефект на завъртане.
Event Registration Guru99 Event
Обяснение на кода:
- Използваме директивата „ng-submit“, за да извикаме функция, наречена „submit“. Тази функция ще се използва за промяна на атрибута ladda на бутона за изпращане.
- Атрибутът ladda е специален атрибут на рамката ladda. Този атрибут добавя ефекта на завъртане към контрола. Задаваме стойността на атрибута ladda на променливата подаване.
- Свойството стил на данни отново е допълнителен атрибут, предлаган от рамката ladda, който просто добавя различен визуален ефект към бутона за изпращане.
- Модулът 'AngularJS-ladda' трябва да бъде добавен към приложението AngularJS.JS, за да работи рамката ladda.
- Първоначално дефинираме и задаваме стойността на променлива, наречена „подаване“, на false. Тази стойност е зададена за атрибута ladda на бутона за изпращане. Първоначално задавайки това на false, ние казваме, че все още не искаме бутонът за изпращане да има ефект ladda.
- Декларираме функция, която се извиква при натискане на бутона за изпращане. В тази функция настройваме „изпращането“ на истина. Това ще доведе до прилагане на ефекта ladda към бутона за изпращане.
Ако кодът се изпълни успешно, след стартиране на вашия код в браузъра ще се покаже следният изход.
Изход:
Когато формулярът се показва първоначално, бутонът за изпращане се показва в неговата проста форма.
При натискане на бутона за изпращане променливата за подаване в контролера е зададена на true. Тази стойност се предава на атрибута "ladda" на бутона за изпращане, което причинява ефекта на завъртане на бутона.
Обобщение
- Проверката на HTML контролите на текстовото поле може да се извърши с помощта на атрибута „задължително“.
- В HTML5 са добавени нови контроли, като парола, имейл и номер, които предоставят собствен набор от проверки.
- Потвърждаването на формуляра в AngularJS се грижи, като се разглеждат стойностите на $ dirty, $ valid, $ invalid и $ pristine на контрола на формуляр.
- Автоматично валидиране в приложения AngularJS може да се постигне и с помощта на модула за JCS-автоматично валидиране.
- Бутоните Ladda могат да бъдат добавени към приложението Angular.js, за да дадат малко подобрено визуално усещане на потребителя при натискане на бутона.