Проверка на AngularJS формуляр при изпращане: Пример за регистрация
Джеймс Хартман
Валидиране на формуляр в AngularJS
Проверка на формуляра в AngularJS е процесът на гарантиране дали данните, въведени във формуляр, са правилни и пълни. Когато потребител изпрати формуляра, първо се извършва валидиране, преди подробностите да бъдат изпратени на сървъра. Процесът на валидиране гарантира във възможно най-добра степен, че данните за полетата за въвеждане са въведени по правилния начин.
В пример от реалния свят, нека приемем сайт, който изисква попълване на регистрационен формуляр, преди да получите пълен достъп до този сайт. Страницата за регистрация ще има полета за въвеждане на потребителско име, парола, имейл адрес и т.н.
Например, имейл адресът винаги трябва да бъде във формат на потребителско име@сайт.домейн; ако някой въведе само потребителското име в имейл идентификатора, тогава в идеалния случай валидирането трябва да е неуспешно. Така че валидирането разглежда извършването на тези основни проверки, преди подробностите да бъдат изпратени на сървъра за допълнителна обработка.
Валидиране на формуляр с помощта на HTML5
Валидирането на формуляр е процесът на предварително валидиране на информацията, въведена в уеб формуляр от потребителя, преди тя да бъде изпратена до сървъра. Винаги е по-добре да потвърдите информацията от страна на самия клиент. Това е така, защото добавя по-малко режийни разходи, ако на потребителя трябва да бъде представен отново формулярът, ако въведената информация е грешна.
Нека да разгледаме как валидирането на формуляр на AngularJS може да се извърши в HTML5.
В нашия пример ще покажем един прост регистрационен формуляр на потребителя, в който потребителят трябва да въведе подробности като потребителско име, парола, имейл адрес и възраст.
Формулярът ще има контроли за валидиране, за да се гарантира, че потребителят въвежда информацията по правилния начин.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body ng-app="sampleApp">
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<div ng-controller="AngularController">
<form>
Enter your user name:
<input type="text" name="name" required><br><br>
Enter your password:
<input type="password"/><br><br>
Enter your email:
<input type="email"/><br><br>
Enter your age:
<input type="number" /><br><br>
<input type="submit" value="Submit"/>
</form>
</div>
</body>
</html>
Обяснение на кода
- За типа въвеждане на текст използваме атрибута „задължителен“. Това означава, че текстовото поле не може да бъде празно, когато формулярът е изпратен, и някакъв вид текст трябва да присъства в текстовото поле.
- Следващият тип въвеждане е парола. Тъй като типът на въвеждане е маркиран като парола, когато потребителят въведе текст в полето, той ще бъде маскиран.
- Тъй като типът на въвеждане е зададен като имейл, текстът в полето трябва да съответства на шаблона име@сайт.домейн.
- Когато типът на въвеждане е маркиран като число, ако потребител се опита да въведе произволен знак с помощта на клавиатурата или азбуката, той няма да бъде въведен в текстовото поле.
Ако кодът е изпълнен успешно, следният изход ще бъде показан, когато стартирате кода си в браузъра за валидиране на AngularJS формуляр при изпращане.
Продукция
За да видите валидирането на формуляра в действие, щракнете върху бутона Изпращане, без да въвеждате информация на екрана.
След като се щракне върху бутона за изпращане, ще се появи изскачащ прозорец, показващ грешка при валидиране, че полето трябва да бъде попълнено.
Така че проверката за контролата, която е маркирана като задължителна, води до показване на съобщение за грешка, ако потребителят не въведе никаква стойност в текстовото поле.
Когато потребителят въведе някаква стойност в контролата на паролата, ще забележите символа '*', използван за маскиране на въведените знаци.
Нека тогава въведете грешен имейл адрес и щракнете върху бутона за изпращане. След като се щракне върху бутона за изпращане, ще се появи изскачащ прозорец, показващ грешка при валидиране, че полето трябва да има символа @.
Така валидирането на контролата, която е маркирана като имейл контрола, ще доведе до показване на съобщението за грешка, ако потребителят не въведе правилен имейл адрес в текстовото поле.
И накрая, когато се опитате да въведете каквито и да било знаци в текстовата контрола за възрастта, те няма да бъдат въведени на екрана. Контролата ще попълни със стойност само когато в контролата е въведено число.
Валидиране на формуляр с помощта на $dirty, $valid, $invalid, $pristine
AngularJS предоставя своите допълнителни свойства за валидиране. AngularJS предоставя следните свойства за контроли за целите на валидирането
- $ мръсен – Потребителят е взаимодействал с контрола
- $валиден – Съдържанието на полето е валидно
- $невалидно – Съдържанието на полето е невалидно
- $първичен – Потребителят все още не е взаимодействал с контрола
По-долу са стъпките, които трябва да се следват, за да се извърши валидиране на Angular.
Стъпка 1) Използвайте свойството no validate, когато декларирате формуляра. Това свойство казва на HTML5, че валидирането ще бъде извършено от AngularJS.
Стъпка 2) Уверете се, че формулярът има дефинирано име за него. Причината за това е, че при извършване на валидиране на Angular ще се използва името на формата.
Стъпка 3) Уверете се, че всяка контрола също има дефинирано име за нея. Причината за това е, че при извършване на валидиране на Angular ще се използва името на контролата.
Стъпка 4) Използвайте ng-шоу директива за проверка на свойствата $dirty, $invalid и $valid за контролите.
Нека да разгледаме пример, който включва гореспоменатите стъпки.
В нашия пример,
Просто ще имаме просто текстово поле, в което потребителят трябва да въведе име на тема в текстовото поле. Ако това не бъде направено, ще се задейства грешка при валидиране и съобщението за грешка ще се покаже на потребителя.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<body>
<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<h1> Guru99 Global Event</h1>
<form ng-app="DemoApp" ng-controller="DemoController" name="myForm" novalidate>
<p>Topic Name:<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>
<input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid">
</p>
</form>
<script>
var app = angular.module("DemoApp",[]);
app.controller("DemoController",function($scope) {
$scope.Display = function () {
$scope.user='Angular';
}
});
</script>
</body>
</html>
Обяснение на кода
- Обърнете внимание, че сме дали име за формуляра, което е „myForm“. Това се изисква при достъп до контролите във формуляра за проверка на AngularJS.
- Използване на свойството „novalidate“, за да се гарантира, че HTML формата позволява на AngularJS да извърши валидирането.
- Използваме директивата ng-show, за да проверим за свойството „$dirty“ и „$invalid“. Това означава, че ако текстовото поле е било променено, тогава стойността на свойството „$dirty“ ще бъде вярна. Освен това, в случай че стойността на текстовото поле е нула, свойството „$invalid“ ще стане вярно. Така че, ако и двете свойства са верни, валидирането ще бъде неуспешно за контролата. Следователно, ако и двете стойности са верни, ng-show също ще стане истина и ще се покаже контролата за обхват със символите в червен цвят.
- В това ние проверяваме свойството „$error“, което също се оценява като true, защото споменахме за контролата, че стойността трябва да бъде въведена за контролата. В такъв случай, когато няма въведени данни в текстовото поле, контролата за обхват ще покаже текста „Изисква се потребителско име“.
- Ако контролната стойност на текстовото поле е невалидна, ние също искаме да деактивираме бутона за изпращане, така че потребителят да не може да изпрати формуляра. Ние използваме свойството „ng-disabled“ за контролата, за да направим това въз основа на условната стойност на свойството „$dirty“ и „$invalid“ на контролата.
- В контролера ние просто задаваме първоначалната стойност на стойността на текстовото поле на текста „AngularJS“. Това просто се прави, за да се зададе някаква стойност по подразбиране на текстовото поле, когато формулярът се покаже за първи път. Той показва по-добре как се извършва проверката за полето за текстово поле.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Продукция
Когато формулярът се покаже първоначално, текстовото поле показва стойността на „AngularJS“ и „бутонът за изпращане“ е активиран. Веднага след като премахнете текста от контролата, съобщението за грешка при валидиране е активирано и бутонът Изпращане е деактивиран.
Екранната снимка по-горе показва две неща
- Бутонът за изпращане е деактивиран
- Няма име на тема в текстовото поле за тема. Следователно той изстрелва съобщението за грешка „Изисква се потребителско име“.
Валидиране на формуляр с помощта на AngularJS Auto Validate
В AngularJS има възможност за автоматично валидиране на всички контроли във формуляр, без да е необходимо да пишете персонализиран код за валидирането. Това може да стане чрез включване на персонализиран модул, наречен „jcs-AutoValidate“.
С този модул на място не е необходимо да поставяте специален код, за да извършите проверката или да покажете съобщенията за грешки. Всичко това се обработва от кода вътре в JCS-AutoValidate.
Нека да разгледаме един прост пример как да постигнем това.
В този пример,
Просто ще имаме проста форма с контрола на текстово поле, което е задължително поле. Трябва да се покаже съобщение за грешка, ако тази контрола не е попълнена.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp">
<div class="form-group">
<form name="myForm" novalidate>
<p>Topic Name:<br></p>
<div class="form-group">
<input class="form-control" type="text" id="user" ng-model="user" required="required"/>
</div>
<div>
<div class="form-group">
<input type="submit">
</div>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate']);
</script>
</body>
</html>
Обяснение на кода
- Първо, трябва да включим скрипта „jcs-auto-validate.js“, който има всички функции за автоматично валидиране.
- Трябва да гарантираме, че всеки елемент, включително „div тага“, е поставен в клас „form-group“.
- Също така трябва да се уверите, че всеки елемент (който е HTML елемент като контрола за въвеждане, контрола за обхват, контрола div и т.н.) като контролите за въвеждане също са поставени в класа на група формуляри.
- Включете jcs-autovalidate във вашия AngularJS JS модул.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Продукция
По подразбиране, когато стартирате своя код, горният формуляр ще бъде показан според HTML кода.
Ако се опитате да изпратите формуляра, ще се появи съобщение за грешка, което казва: „Това поле е задължително“. Всичко това се прави от опцията JCS-AutoValidate.
Потребителски отзиви с бутони Ladda
Бутоните „ladda“ са специална рамка, изградена за бутони отгоре JavaСценарий за придаване на визуален ефект на бутоните, когато са натиснати.
Така че, ако даден бутон получи атрибута „ladda“ и бъде натиснат, ще се покаже ефект на завъртане. Освен това има различни стилове на данни, налични за бутона, за да осигурят допълнителни визуални ефекти.
Нека да разгледаме пример как да видите бутоните „ladda“ в действие. Просто ще видим прост формуляр, който има бутон за изпращане. Когато бутонът бъде натиснат, върху бутона ще се покаже ефект на въртене.
<!DOCTYPE html>
<html>
<head>
<meta chrset="UTF 8">
<title>Event Registration</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<script src="lib/jcs-auto-validate.min.js"></script>
<script src="lib/angular-ladda.js"></script>
<script src="lib/angular-ladda.min.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="lib/bootstrap.css"></script>
<body>
<h1> Guru99 Event</h1>
<div ng-app="DemoApp" ng-controller="DemoController">
<div class="form-group">
<form name="myForm" novalidate ng-submit="submit()">
<div>
<button class="btn btn-primary" type="submit" ladda="submitting" name="sbutton" data-style="expand-right">Submit</button>
</div>
</form>
</div>
</div>
<script>
var app=angular.module('DemoApp',['jcs-autoValidate','angular-ladda']);
app.controller('DemoController',function($scope) {
$scope.submitting = false;
$scope.submit = function () {
$scope.submitting = true;
}
});
</script>
</body>
</html>
Обяснение на кода
- Ние използваме „ng-подаване” за извикване на функция, наречена „изпращане”. Тази функция ще се използва за промяна на атрибута ladda на бутона за изпращане.
- Атрибутът ladda е специален атрибут на рамката ladda. Това е атрибутът, който добавя ефекта на въртене към контрола. Задаваме стойността на атрибута ladda на изпращащата променлива.
- Свойството data-style отново е допълнителен атрибут, предлаган от рамката ladda, който просто добавя различен визуален ефект към бутона за изпращане.
- Модулът „AngularJS-ladda“ трябва да бъде добавен към приложението AngularJS.JS, за да работи рамката ladda.
- Първоначално дефинираме и задаваме стойността на променлива, наречена „подаване“, на false. Тази стойност е зададена за атрибута ladda на бутона за изпращане. Като първоначално задаваме това на false, ние казваме, че все още не искаме бутонът за изпращане да има ladda ефекта.
- Ние декларираме функция, която се извиква при натискане на бутона за изпращане. В тази функция ние задаваме „изпращане“ на true. Това ще накара ефекта ladda да бъде приложен към бутона за изпращане.
Ако кодът се изпълни успешно, ще се покаже следният изход, когато стартирате кода си в браузъра.
Продукция
Когато формулярът се покаже първоначално, бутонът за изпращане се показва в неговата проста форма.
Когато се натисне бутонът за изпращане, променливата за изпращане в контролера е зададена на true. Тази стойност се предава на атрибута „ladda“ на бутона за изпращане, което предизвиква ефекта на въртене на бутона.
Oбобщение
- Валидирането на HTML контролите на текстовото поле може да се извърши с помощта на атрибута "required".
- В HTML5 има добавени нови контроли като парола, имейл и номер, които предоставят собствен набор от проверки.
- Валидирането на формуляр в AngularJS се извършва чрез разглеждане на $dirty, $valid, $invalid и $pristine стойности на контрола на формуляр.
- Автоматично валидиране в приложения на AngularJS може да се постигне и чрез използване на модула JCS-auto validate.
- Бутоните Ladda могат да се добавят към приложение Angular.js, за да се даде малко подобрено визуално усещане на потребителя, когато бутонът е натиснат.
