Проверка на входа със Stenciljs

В този урок ще научите как да създавате хубави входове със Stencil като този по-долу. Ще научите също как да структурирате и предоставите библиотека от валидатори с вашата библиотека от уеб компоненти.

Как да подобрите вашата библиотека от уеб компоненти с валидатори?

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

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

Това се нарича проверка на входа. Ако искате да използвате повторно валидирането във всичките си приложения (мобилни, уеб, …), тогава интегрирането на този процес във вашата библиотека с компоненти е добра идея. Повече код ще бъде споделен между вашите приложения и вашите продукти ще бъдат по-лесни за поддръжка.

Създайте входен компонент

NB: Можете да намерите кода на тази статия в GitHub. https://github.com/sebastien-lb/stencil-validators

Нека започнем, като създадем нов компонент с Stencil компонент стартер:

git clone https://github.com/ionic-team/stencil-component-starter validated-component
cd validated-component
git remote rm origin
npm install

Създайте своя основен персонализиран вход като този:

`моят-компонент.tsx`

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

`моят-компонент.scss`

Не забравяйте да добавите единични тестове! Можете да намерите наистина хубав модел за тестване на единици в тази статия.

Сега имаме нещо подобно:

NB: Използвал съм scss код вместо css. За да използвате sass във вашия код, следвайте тези стъпки от Stencil документация.

Добавете проверка на входа

Основният ни проблем е да предоставим мащабируема и лесна за използване библиотека от валидатори с нашата библиотека от уеб компоненти.

Това, което искаме, е страхотно потребителско изживяване за човека, който ще използва нашия компонент. Искаме той да може да използва нашия компонент по следния начин:

<my-input value={something} validator={'email'} ></my-input>

Където „имейл“ може да бъде променен на каквото пожелаете. Например можете да замените „имейл“ с „плод“ и въведеното ще бъде валидирано само ако потребителят въведе името на плод.

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

Нека приложим всичко това.

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

Ние дефинираме нашия персонализиран FruitValidator, който ще върне true, ако дадената стойност е валидно име на плод.

***pas let mais const, fruits.includes(value) plutot***

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

Накрая добавяме валидатора към нашия компонент и го използваме!

Структурата на проекта трябва да изглежда така*това*:

Сега имаме нашия първи валидатор, можем да го използваме! Добавете няколко реда css, за да получите нещо подобно:

Ами имаме основен процес на валидиране. Нека го подобрим!

Работа с валидатори с параметри

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

Можем да създадем функция за конструиране на нашия валидатор въз основа на опциите, които искаме.

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

***Опции за промяна***

Нашият модифициран компонент:

Вече имаме възможност да използваме по-усъвършенствани валидатори с нашите компоненти!

`‹my-component validator={{name: ‘length’, опции: {min: 6}}} ›‹/my-component›`

Работа с няколко валидатора едновременно

Ще комбинираме нашите валидатори, за да създадем по-сложен валидатор! Искаме да запазим нашия валидатор прост. Да приемем, че искате потребителят да въведе валидно име на плод с минимална дължина от 6 знака. Трябва да можете да го направите по следния начин:

`‹my-component validator={[‘fruit’, {name: ‘length’, options: {min: 6}}]} ›‹/my-component›`

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

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

Най-накрая нашият нов метод getValidator:

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

NB: ако не сте запознати с функцията за намаляване, можете да „спечелите за нея тук“.

Използване на нашите два комбинирани валидатора:

`‹my-component validator={[{name: ‘length’, options: {min: 6}}, ‘fruit’]} ›‹/my-component›`

Вече имаме много хубав начин да използваме валидатори в нашите входове!

Работа с външни валидатори

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

Тук указваме Validator‹string›, защото знаем, че стойността, която искаме да валидираме, е от тип низ.

Ние адаптираме нашата функция getValidator, за да използваме валидатор, предаван като параметри.

Това е ! Вече имате възможност да използвате други функции за валидиране :)

Работа с асинхронни валидатори

Асинхронните валидатори могат да бъдат представени с интерфейс като този:

Ако модифицирате фабричната и комбинираната функция Validator с ключовата дума await, тогава трябва да можете да използвате асинхронни валидатори, за да валидирате входа си!

Единично тестване

Едно от предимствата на разделянето на логиката за валидиране от останалата част от компонента е, че можете да разделите Unit testing.

Много хубав модел за тестване на валидатори е да използвате силата на array.forEach вижте по-долу:

За щастие всички тестове преминават!

Последни думи

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

GitHub Repo: https://github.com/sebastien-lb/stencil-validators