Валидиране на формуляр в AngularJS при изпращане: $dirty, $valid и $invalid

по: Джеймс Хартман Джеймс Хартман
Hours Обновено

⚡ Умно обобщение

Валидирането на формуляри в AngularJS проверява дали въведените във формуляр данни са правилни и пълни, преди да достигнат до сървъра. Тук са разгледани четири подхода - от обикновени HTML5 атрибути, през свойства на обхвата, до модули за автоматично валидиране.

  • 🧩 HTML5 атрибути: Задължителният атрибут и типовете за въвеждане на имейл, парола и номер предоставят проверки, базирани на браузъра, без скриптове.
  • 🔍 Държавни имоти: AngularJS предоставя $dirty, $pristine, $valid и $invalid на всеки именуван контрол във формата.
  • ???? ️ Изискване за именуване: Както формулярът, така и всеки контрол се нуждаят от атрибут name, защото състоянието на валидиране се адресира като formName.controlName.
  • 🚫 Потискане на изскачащите прозорци: Добавянето на novalidate към формуляра спира браузъра да прехваща изпращането, така че AngularJS да може да го обработи.
  • 💬 Дисплей на съобщението: Модулът ngMessages замества подредените директиви ng-show и показва грешки по една в даден момент по приоритетен ред.
  • ️ Автоматично валидиране: Модулът jcs-autoValidate генерира съобщения за грешки за всеки контрол без никаква персонализирана маркировка.
  • 🔘 Обратна връзка за подадената информация: Бутон Ladda прилага въртяща се функция, докато изпращането е в процес на обработка, сигнализирайки на потребителя за напредъка.
Прочетете повече

Валидиране на формуляр в AngularJS

Проверка на формуляра В AngularJS това е процесът, който гарантира дали въведените във формуляр данни са правилни и пълни. Когато потребителят изпрати формуляра, първо се извършва валидиране, преди данните да бъдат изпратени на сървъра. Процесът на валидиране гарантира, доколкото е възможно, че полетата за въвеждане са попълнени по правилния начин.

В реален пример, да предположим, че сайт изисква попълване на регистрационен формуляр, преди да се предостави пълен достъп. Страницата за регистрация ще има полета за въвеждане на потребителско име, парола, имейл адрес и т.н.

Например, имейл адресът винаги трябва да бъде във формат потребителско име@сайт.домейнАко някой въведе само потребителското име, валидирането би трябвало да е неуспешно. Валидирането извършва тези основни проверки, преди данните да бъдат изпратени на сървъра за по-нататъшна обработка.

⚠️ Бележка към версията: AngularJS (клон 1.x) достигна края на жизнения си цикъл на 31 декември 2021 г. и не получава допълнителни корекции за сигурност. Техниките по-долу остават верни за наследени приложения; съвременният Angular се справя със същата задача с шаблонно-базирани или реактивни форми.

Валидиране на формуляр с помощта на HTML5

Валидирането на формуляри е процес на предварителна проверка на информацията, въведена в уеб формуляр, преди тя да бъде изпратена към сървъра. Валидирането от страна на клиента е за предпочитане, защото добавя много по-малко режийни разходи, отколкото повторното представяне на формуляра след двупосочен процес.

Примерът по-долу показва прост формуляр за регистрация, в който потребителят въвежда потребителско име, парола, имейл адрес и възраст. Формулярът съдържа контроли за валидиране, които гарантират, че информацията е въведена правилно.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<h1>Guru99 Global Event</h1>

<form>
    Enter your user name:
    <input type="text" name="name" required><br><br>

    Enter your password:
    <input type="password" name="password"><br><br>

    Enter your email:
    <input type="email" name="email"><br><br>

    Enter your age:
    <input type="number" name="age"><br><br>

    <input type="submit" value="Submit">
</form>
</body>
</html>

⚠️ Корекции са приложени към всеки обект на тази страница. Оригиналите са декларирани chrset="UTF 8", което не е нито валиден атрибут, нито валидно кодиране, и зареди AngularJS три пъти — angular-route.js първо, което хвърля грешка, защото модулът за маршрутизация се регистрира срещу рамка, която не е заредена, след това angular.min.js намлява angular.js, същата библиотека два пъти. Те също така издърпаха bootstrap.css през <script> етикет, така че никога не е прилагано стилизиране. Всеки списък вече зарежда една библиотека, версия 1.8.3, и свързва правилно стиловия лист. Подпълване на оформлението, изградено от повтарящи се &nbsp; обектите са премахнати.

Code Обяснение

  1. За типа въвеждане на текст, required Атрибутът означава, че текстовото поле не може да бъде празно, когато формулярът бъде подаден.
  2. Следващият тип въвеждане е парола. Тъй като типът е маркиран като парола, въведеният в полето текст е маскиран.
  3. Тъй като типът на въвеждане е посочен като имейл, текстът в полето трябва да съответства на шаблона име@сайт.домейн.
  4. Когато типът на въвеждане е маркиран като число, символите, въведени от клавиатурата, просто не се приемат от полето.

Продукция

За да видите валидирането в действие, щракнете върху „Изпращане“, без да въвеждате нищо.

Появява се изскачащ прозорец, който съобщава, че полето трябва да бъде попълнено, така че контролата, маркирана като задължителна, блокира изпращането, когато е оставена празна.

Въвеждането на стойност в контролата за парола показва символа „*“, маскиращ знаците.

Въвеждането на неправилно формиран имейл адрес и щракването върху „Изпращане“ води до изскачащ прозорец с искане за символа @. И накрая, символите, въведени в полето за контрол на възрастта, никога не се появяват, защото полето приема само цифри.

Изскачащите прозорци в браузъра се настройват бързо, но техният текст и стил не могат да бъдат променяни. Тук се намесват свойствата за валидиране на AngularJS.

СВЪРЗАНИ СТАТИИ

Валидиране на формуляр с помощта на $dirty, $valid, $invalid, $pristine

AngularJS предоставя свои собствени свойства за валидиране. Следните свойства са изложени на всеки именуван контрол:

  • $ мръсен – Потребителят е взаимодействал с контрола
  • $валиден – Съдържанието на полето е валидно
  • $невалидно – Съдържанието на полето е невалидно
  • $първичен – Потребителят все още не е взаимодействал с контрола

По-долу са стъпките за извършване на AngularJS валидация.

Стъпка 1) Използвайте novalidate свойство при деклариране на формата. Това казва на браузъра, че валидирането ще бъде обработено от AngularJS.

Стъпка 2) Уверете се, че формулярът има дефинирано име, защото това име се използва за достигане на състоянието на валидиране.

Стъпка 3) Уверете се, че всеки контрол също има name атрибут, по същата причина. Контрола без име никога не се регистрира във формуляра.

Стъпка 4) Използвайте ng-шоу директива за проверка на свойствата $dirty, $invalid и $valid.

Примерът по-долу има едно текстово поле, в което потребителят въвежда име на тема. Ако то е оставено празно, се задейства грешка при валидиране и се показва съобщението.

<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.$invalid">
    </p>
</form>

<script>
    var app = angular.module("DemoApp", []);

    app.controller("DemoController", function($scope) {
        // Seed the textbox so the form starts in a valid state
        $scope.user = "AngularJS";
    });
</script>

⚠️ Коригирани са две логически грешки. Оригиналът деактивира бутона с ng-disabled="myForm.user.$dirty && myForm.user.$invalid", защото $dirty е невярно, докато потребителят не докосне полето, бутонът остава включен върху недокоснат празен формуляр, точният случай, който трябваше да блокира; myForm.$invalid обхваща и двете. Оригиналът също така обви стойността по подразбиране в $scope.Display = function () { $scope.user = 'Angular'; }, функция, която никога не е била извикана, така че текстовото поле се отвори празно, въпреки че текстът твърди, че показва „AngularJS“. Присвояването вече се извършва директно, със стойността, цитирана от околния текст.

Code Обяснение

  1. На формуляра се дава името „myForm“. Това е необходимо, за да се достигне до контролите му за валидиране.
  2. - novalidate свойството спира валидирането от браузъра, така че AngularJS може да го направи вместо това.
  3. Директивата ng-show проверява свойствата „$dirty“ и „$invalid“. Ако текстовото поле е било променено, $dirty е true; ако стойността му е празна, $invalid е true. Когато и двете са true, се показва диапазонът с червения текст.
  4. Вложената проверка прочита свойството „$error.required“, което е true, когато задължителен контрол няма стойност, и показва „Потребителско име е необходимо“.
  5. Бутонът за изпращане е деактивиран чрез ng-disabled винаги когато формулярът като цяло е невалиден.
  6. Контролерът задава началната стойност на текстовото поле на „AngularJS“, така че формулярът се отваря във валидно състояние и валидирането е по-лесно за наблюдение, когато текстът се изтрие.

Продукция

Когато формулярът се покаже за първи път, текстовото поле показва „AngularJS“ и бутонът за изпращане е активиран. Веднага щом текстът бъде премахнат, се появява съобщението за грешка и бутонът е деактивиран.

Снимката на екрана по-горе показва две неща:

  • Бутонът за изпращане е деактивиран
  • В текстовото поле „Тема“ няма име на тема, затова се показва съобщението за грешка „Изисква се потребителско име“.

Как да се показват грешки при валидиране с ngMessages

Горният модел работи, но не се мащабира. Поле с четири ограничения се нуждае от четири вложени ng-show обхваща, и когато няколко от тях се провалят едновременно, всички съобщения се появяват заедно. ngMessages Модулът, доставян отделно от екипа на AngularJS, решава и двата проблема: показва по едно съобщение, в реда, в който са написани съобщенията.

Заредете модула и го добавете като зависимост.

<script src="https://code.angularjs.org/1.8.3/angular-messages.js"></script>
<script>
    angular.module("DemoApp", ["ngMessages"]);
</script>

След това маркировката се чете като списък с правила, а не като набор от условия.

<input type="text" name="user" ng-model="user"
       required ng-minlength="4" ng-maxlength="20">

<div style="color:red" ng-messages="myForm.user.$error"
     ng-if="myForm.user.$dirty">
    <div ng-message="required">A topic name is required</div>
    <div ng-message="minlength">Use at least 4 characters</div>
    <div ng-message="maxlength">Use no more than 20 characters</div>
</div>

Три детайла правят това да се държи добре на практика. ng-messages атрибутни точки в контролата $error обект, а не на булева стойност, така че не е необходимо да се повтаря условие. Само първото съвпадение ng-message рендерира, което означава, че празно поле съобщава, че е задължително, вместо да се оплаква и от дължината му. Добавянето ng-messages-multiple обръща това поведение, когато всеки провал наистина трябва да бъде изброен.

Увийтеping блокът в ng-if="myForm.user.$dirty" запазва формата бездействаща, докато потребителят действително не въведе нещо. Заместването $touched за $dirty забавя съобщението допълнително, докато фокусът не напусне полето, което обикновено е по-подходящият избор при дълга регистрационна форма.

Едно предупреждение: ngMessages се доставя като отделен файл, така че забравянето на тага на скрипта или зависимостта на модула оставя блока да не рендира нищо, без конзолна грешка, която да го обясни.

Писането на съобщения на ръка е прецизно, но повтарящо се. Следващият раздел разглежда модул, който ги генерира автоматично.

Валидиране на формуляр с помощта на AngularJS Auto Validate

AngularJS може да валидира всички контроли във формуляр автоматично, без персонализиран код за валидиране или съобщения за грешки. Това се прави чрез включване на общностен модул, наречен „jcs-autoValidate“.

С този модул не е необходим специален код за изпълнение на валидацията или показване на съобщенията; всичко се обработва вътре в jcs-autoValidate.

Примерът по-долу показва опростен формуляр с едно задължително текстово поле. Ако контролата не е попълнена, се показва съобщение за грешка.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/jcs-auto-validate.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp">
    <form name="myForm" novalidate>
        <div class="form-group">
            <label for="user">Topic Name:</label>
            <input class="form-control" type="text"
                   id="user" name="user" ng-model="user" required>
        </div>
        <div class="form-group">
            <input type="submit">
        </div>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['jcs-autoValidate']);
</script>
</body>
</html>

⚠️ Корекция: оригиналът идентифицира контролата с id="user" само. jcs-autoValidate достига до контролата чрез формуляра, така че a name Атрибутът е задължителен и съобщението никога не се е появявало без него. Оригиналът също така е заредил две различни версии на AngularJS, 1.6.4 от Google CDN заедно с 1.6.9 и никога не е бил свързан Bootstrap въпреки че примерът зависи от него form-group намлява form-control класове за позициониране на текста на грешката.

💡 Забележка: jcs-autoValidate е проект на общността и вече не се поддържа активно. Той все още може да се използва в съществуващи AngularJS приложения, но вградената ngMessages Подходът, показан по-рано, е по-безопасният избор за всичко ново.

Code Обяснение

  1. Включен е скриптът „jcs-auto-validate.js“, който съдържа цялата функционалност за автоматично валидиране.
  2. Всеки контрол и заобикалящият го div се поставят в клас „form-group“, където модулът инжектира своето съобщение.
  3. Контролът носи както идентификатор, така и name, и Bootstrap доставя form-control стайлинг.
  4. Модулът „jcs-autoValidate“ е посочен като зависимост от модула AngularJS.

Продукция

По подразбиране формулярът се изобразява точно както е написан.

Изпращането на празния формуляр показва съобщението „Това поле е задължително“, генерирано изцяло от jcs-autoValidate. След като формулярът бъде валидиран, оставащият въпрос е какво вижда потребителят, докато се изпраща.

Потребителски отзиви с бутони Ladda

Бутоните „Ladda“ са рамка, изградена върху JavaСценарий което придава визуален ефект на бутоните при натискане.

Ако на бутон е зададен атрибутът „ladda“ и бъде натиснат, се показва ефект на завъртане. Налични са различни стилове данни за допълнителни визуални ефекти.

Примерът по-долу показва прост формуляр с бутон за изпращане. Когато бутонът бъде натиснат, върху него се появява ефект на завъртане.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
    <link rel="stylesheet" href="lib/bootstrap.css">
    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>
    <script src="lib/angular-ladda.min.js"></script>
</head>
<body>
<h1>Guru99 Event</h1>

<div ng-app="DemoApp" ng-controller="DemoController">
    <form name="myForm" novalidate ng-submit="submit()">
        <button class="btn btn-primary" type="submit"
                ladda="submitting" name="sbutton"
                data-style="expand-right">Submit</button>
    </form>
</div>

<script>
    var app = angular.module('DemoApp', ['angular-ladda']);

    app.controller('DemoController', function($scope) {
        $scope.submitting = false;

        $scope.submit = function() {
            $scope.submitting = true;
        };
    });
</script>
</body>
</html>

⚠️ Корекция: оригиналът е зареден angular-ladda.js намлява angular-ladda.min.js заедно, което регистрира един и същ модул два пъти, и отново изтегли две версии на AngularJS. Също така изброи jcs-autoValidate като зависимост, която този пример никога не използва. Тук се зарежда по едно копие от всяка библиотека.

Code Обяснение

  1. "ng-подаванеДирективата ” извиква функция с име „submit“, която променя атрибута ladda на бутона.
  2. Атрибутът ladda принадлежи към рамката Ladda и е това, което добавя ефекта на въртене. Стойността му е обвързана с submitting променлива.
  3. Свойството data-style е друг атрибут на Ladda, който избира различен визуален ефект.
  4. Модулът „angular-ladda“ трябва да бъде добавен към AngularJS приложението, за да работи рамката.
  5. - submitting Променливата е инициализирана на false, така че бутонът стартира без ефекта на завъртане.
  6. Функцията за подаване задава submitting на true, което прилага ефекта. В реално приложение би се нулирало на false, след като сървърът отговори, в противен случай бутонът се върти вечно.

Продукция

Когато формулярът се покаже за първи път, бутонът за изпращане се показва в обикновен вид.

Когато бутонът е натиснат, submitting Променливата е зададена на true. Тази стойност достига атрибута „ladda“ на бутона, произвеждайки ефект на завъртане.

Въпроси и Отговори

$dirty става true, когато стойността се промени. $touched става true, когато полето загуби фокус. Използвайте $touched, за да забавите грешка, докато потребителят продължи напред, което изглежда по-малко агресивно, докато typing.

Добавете директивата ng-pattern с регулярен израз, например ng-pattern=”/^[0-9]{6}$/”. Грешката след това се появява като $error.pattern, която ngMessages може да докладва като всяко вградено ограничение.

Да. Инструментите с изкуствен интелект четат маркировката и генерират съответстващи блокове required, ng-pattern и ngMessages. Винаги проверявайте регулярните изрази, тъй като генерираните шаблони за имейл и телефон често отхвърлят валиден вход.

Асистентите с изкуствен интелект бързо проверяват трите обичайни причини: липсващ атрибут name във формуляра или контролата, липсващ ng-model и novalidate, който е пропуснат, така че браузърът първо да прехваща изпращането.

Не. Подобрява потребителското изживяване и намалява двупосочните обработки, но всеки може да го заобиколи с инструменти за разработчици. Всяко правило, приложено в браузъра, трябва да бъде приложено отново на сървъра.

Обобщете тази публикация с: