H PrettyForms - просто валидиране на формуляри клиент-сървър От пясъчника

.collapse">Съдържание

Мисля, че за много от нас фразата „валидиране на формуляр“ е синоним на куп допълнителен код за валидиране в контролерите, продължителна настройка на всички видове плъгини за валидиране и т.н. Да, съвременният свят предлага много различни решения на този проблем, както от страна на клиента, така и от страна на сървъра. Но ако трябва да бъда честен, като говорим за валидиране от страна на клиента... някои от тези библиотеки са твърде тромави и тромави, до такава степен, че всеки път, когато бях обезсърчен да ги свържа с моите проекти. Да, и от страна на сървъра бих искал да скрия проверката на въведените данни някъде далеч от основната логика на приложението.

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

Работен пример:

PrettyForms е проектиран от самото начало за сайтове, изградени с Twitter Bootstrap, но можете лесно да замените неговите шаблони за съобщения за грешка със свои собствени, като замените три променливи в обекта „PrettyForms.templates“.

Най-лесният вариант

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

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

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

Опция с клиент-сървър валидиране

Алгоритъм на работа:

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

Тоест сървърът винаги отговаря с определен набор от команди за браузъра, а браузърът просто изпълнява тези команди на клиентската машина. Това е алгоритъмът на библиотеката. По-подробно описание на протокола може да се намери в wiki, в раздела „Формат на комуникационния протокол клиент-сървър“.

За да конфигурирате библиотеката да работи със сървъра, добавете класаsenddataкъм вашия стандартен бутон за изпращане на формуляр, благодарение на който кликванията върху бутона ще бъдат прихващани и обработвани от библиотеката. Можете също да добавите два нови атрибута към него:

въвеждане на данни=""
връзка за данни=""

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

Сега библиотеката не само ще извършва проверка на клиента, но също така ще отговаря за изпращането на данни до сървъра и обработката на отговора.

Пример за формуляр за рамката Bootstrap с атрибути за валидиране:

Сега, като щракнете върху бутона „Регистрация“, ще принудим библиотеката да провери валидността на данните от формуляра, след което ще ги изпрати на сървъра и ще обработи отговора.

Валидиране на сървъра

Валидирането на сървъра трябва да се извършва от рамката, с която работите. Библиотеката предоставя само класа Commands, което улеснява създаването на валиден JSON отговор с команди за клиента.

Логиката трябва да бъде нещо подобно: ако проверката на полето е неуспешна, тогава сървърът връща JSON отговор с команда за показване на грешка. Ако проверката е била успешна, сървърът връща JSON отговор с други команди, например пренасочване на потребителя към страницата за успешна регистрация. Пример за подготовка на отговор в PHP:

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

За да разрешите валидиране за всеки контролер и модел на Laravel, свържете характеристика към желания модел, за да свържете функционалността за валидиране, и също така опишете масив с правила за валидиране за полета в него:

След това в кода за обработка на заявката просто трябва да замените метода за запазване на модела с нов:validateAndSave(), който автоматично ще валидира данните преди изпращането им и ако нещо се обърка, изпълнението ще бъде спряно и ще бъде изпратен отговор на клиента с командата за показване на грешки при валидиране на сървъра. Също така, вместо стандартния отговор,трябва да подготвите и върнете на клиента специално формиран JSON отговор, пример може да видите по-долу:

МетодътLaravelResponse::generateприема асоциативен масив от команди и техните параметри, които ще бъдат изпълнени на клиентската машина и връща подготвен обект Response в отговор.

Първоначално библиотеката поддържа само две команди:validation_errorsиredirect. Първата команда се използва от библиотеката за показване на грешки във формуляра, втората се използва за пренасочване на потребителя към друго място. Можете лесно да разширите функционалността на библиотеката, като добавите свои собствени манипулатори на команди, като това:

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

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

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

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

Един от често срещаните проблеми е трудността при получаване на съдържание от тези полета, които имат приложен допълнителен плъгин, като Chosen или CKEditor. Конкретно за тези два плъгина вече в библиотекатаподдръжката е вградена и получава стойности правилно от полетата, свързани с тези добавки, но има хиляди други добавки в света, с които може да не работи правилно. Това трябва да се има предвид при използване на библиотеката.