В това ръководство ще преминем през създаването на персонализирана кука за реакция за валидиране на пароли. Проверка на дължина, главни, малки букви, число, специален знак и съвпадение на втора парола.
Индекс:
- Следвайте заедно
- Бърз старт (превъртете до края на първия раздел)
- Екстра (правя компонента по-персонализиран и усъвършенстван)
- Бърз старт за предварително персонализиране (превъртете надолу)
Следвайте заедно
Ние ще създадем персонализирана кука, която можете да използвате за валидиране на вашите пароли със следното.
- Минимален брой знаци
- Главна буква
- малки букви
- Включва номер
- Включва специални знаци
- И двете пароли съвпадат
Персонализираната кука ще бъде изградена без никакви пакети на трети страни и ще използва само vanilla react и vanilla javascript.
Ние също така ще показваме нашето валидиране чрез приложението. Което прави супер лесно да добавите това към приложението си и да го направите по-красиво за пълно производство.
Благодарим ви, че прочетохте, не се колебайте да ръкопляскате и да предоставите всякакви отзиви, които имате.
Надявам се, че ако четете тази статия, вече сте запознати с React и настройката на React. Ако не сте, препоръчвам да следвате тази официална реакция на статия. След като сте настроили и сте готови за използване, преминете към стъпка 1.
Стъпка 1: Структура на файла и папката
Във вашето приложение React ви позволява да създадете следното:
- Папка вътре в src/ с име „hooks“
- Във вашата папка с кукички създайте файл с име „usePasswordValidation.js“
Файловата структура трябва да изглежда така:
Стъпка 2: Настройване на нашата персонализирана кука за приемане на пароли.
Тук трябва да настроим нашата персонализирана кука да приема две отделни пароли и след това да експортираме самата кука. Трябва да можем да приемем две отделни пароли, за да потвърдим, че съвпадат.
To do:
- Създайте реагиращ функционален компонент
- Актуализирайте подпорите, за да приемете две пароли
- Експортирайте куката
Вашият файл „usePasswordValidation.js“ сега трябва да изглежда така
Стъпка 3: Импортирайте useState и useEffect в usePasswordValidation.js и настройте това, което искаме да валидираме
To do:
- Импортирайте useState и useEffect от реакция
- Настройте нашите useStates за това, което искаме да валидираме
- Създайте useEffect, който ще има нашите две пароли като зависимости
- Върнете useStates
Ето как трябва да изглежда файлът сега. Това, което направихме, е създадохме променлива useState и функция за изпращане за всички неща, които валидираме.
Скоро ще прегледаме всеки от тях и ще върнем стойността true или false от нашата персонализирана кука.
За да дадем някакъв контекст за това, което ще се случи, ще поставим някои функции за валидиране вътре в нашия useEffect и искаме нашият useEffect да се изпълнява по всяко време, когато нашите пароли се променят и проверяваме повторно низа. Това ще ни даде точно потвърждение на паролата.
Стъпка 4: Настройване на нашия вход в App.js
Ще настроим нашия вход в App.js, за да можете да тествате всяко валидиране, докато вървим напред.
To do:
- Създайте два входа
- Създайте функции, които ще хващат стойностите на нашите входове и ще ги съхраняват в useState hook.
- Импортирайте нашата персонализирана кука
- Прекарайте двете пароли през нашата нова персонализирана кука
- Деструктурирайте нашата кука и вземете стойностите, които връщаме, и създайте неподреден списък за показване на стойностите на валидациите, които правим.
В момента вашият App.js трябва да изглежда така.
Вашето визуализирано приложение също трябва да изглежда така
Докато преминаваме през следващите стъпки за добавяне на проверка към нашата персонализирана кука, ние ще правим промени само вътре в useEffect, задавайки нашите променливи useState на true или false в зависимост от функцията.
Стъпка 5: Проверка на дължината
Тази проверка е доста проста, това, което правим тук, е в useEffect, че чакаме стойността на firstPassword да се актуализира и когато това стане, тя оценява функцията вътре в изпращането на setValidLength useState.
В този случай ние просто оценяваме дължината на низа за парола, в този случай го правим минимум 8 знака. Ако не е равно на или по-голямо от 8, ще бъде невярно.
Вашият useEffect трябва да изглежда така сега и в приложението ви, когато въведете 8 знака в първия вход, сега трябва да видите стойността да се превръща в true.
Ето как трябва да изглежда в изобразеното приложение.
Стъпка 6: Проверка на главни и малки букви
Уау! Надявам се, че сте развълнувани като мен, тази част от създаването на приложения наистина ме развълнува.
Тук ще добавим две различни валидации към нашия useEffect, които включват UpperCase и LowerCase.
Тук използваме функционалността toLowerCase() и toUpperCase(), за да работи тази проверка.
Вашият файл с персонализирана кука useEffect сега трябва да изглежда така.
Стъпка 7: Паролата за валидиране има номер
Тук ще използваме някакъв регулярен израз и тестовата функция, за да видим дали регулярният израз се оценява като true. В този случай ние използваме /\d/, което е доста често срещан модел на регулярен израз за тестване на низ дали има число в него или не.
Вашата персонализирана кука useEffect сега трябва да изглежда така.
Стъпка 8: Паролата за потвърждаване има специален знак
Подобно на стъпка 7 с числото, ние ще използваме регулярен израз, за да тестваме низа, за да видим дали паролата има специален знак. Въпреки че този път регулярният израз е малко по-сложен.
Вашата персонализирана кука useEffect сега трябва да изглежда така.
Стъпка 9: Проверка на съответствието на паролите
Уау, стигнахме до окончателното съвпадение на паролите за валидиране!
Това не е толкова просто, колкото може да изглежда, въпреки че в края на деня е доста просто.
Това, което трябва да се направи, е да се уверим, че първата парола изобщо съществува. Ето защо ние използваме троичния код, за да потвърдим, че е верен, след като това е потвърдено, можем да сравним първата и втората парола, за да видим дали са идентични.
10: Окончателно
Вие успяхте! Вече имате персонализирана кука, която можете да използвате за валидиране на пароли по валидна дължина, главни букви, малки букви, Включва число, Включва специален знак и след това съвпада с втората парола.
За да ви покаже как трябва да функционира, вижте gif по-долу. Продължете, изобразете приложението си и сравнете! Ако имате проблеми, върнете се към стъпките по-горе.
Благодаря ви, че следвате ръководството ми, оценявам го.
Окончателен персонализиран файл с кука
Проверете отново дали вашият окончателен файл изглежда по следния начин
Бърз старт
Значи искате кода, а?
Ами ето го! Кликнете върху връзката github по-долу!
Радвам се да споделите!
Моля ви, ако можете да ме поздравите за средната статия и да поставите звезда на репото в github. Това наистина ми помага много и ми дава възможност да продължа да създавам тези ръководства и лесни хранилища за клониране.
Можете да ме намерите:
Github
LinkedIN
ЗАБЕЛЕЖКА: Следващият раздел не е задължителен, за да направите вашата персонализирана кука, а е по-скоро забавно нещо, за да направите куката още по-персонализирана за бъдещи потребители.
Екстра: Предварително персонализиране
Страхотно! Успяхте досега! Сега нека направим тази кука още по-добра, като я направим по-персонализирана.
Какво можем да направим по-персонализирано, питате?
Ами нека направим следното:
- Добавете проп, където можем да предадем колко знака искаме да потвърдим и да направим по подразбиране.
- Да кажем, че имате друго приложение или друга част от вашето приложение, където не искате потребителят да се нуждае от специален знак или да използва номер, нека да прехвърлим друга опора на куката, където можете да изключите тази функция.
Допълнително 1: Добавяне на опора към кука за валидиране на персонализирана дължина
Неща за вършене:
- Добавете опора в персонализирана кука
- Добавете стойност по подразбиране към prop
- Подайте нова стойност на проп в нашия App.js
Отворете своя usePasswordValidation.js и нека приемем подпора и зададем стойност по подразбиране за нея.
Ако погледнете отблизо, ето какво се е променило.
- Вътре във функцията добавихме подложката requiredLength и зададохме initalValue на 8. Като направихме 8 стандартното изискване за минимална дължина.
- Добавихме requiredLength към нашата функция за валидиране вътре в useEffect, вместо да й предаваме необработено число.
Сега нека актуализираме нашия App.js, за да предадем проп за актуализиране на необходимата валидация на минимална дължина.
Ще споделя само кода, който се промени, така че можете да видите тук, в куката вътре в нашия App.js, ние добавихме проп-а requiredLength и предадохме стойността 10.
Сега, когато паролата се валидира, минималната дължина ще бъде 10 символа за преминаване.
Екстра 2: Добавяне на възможност за деактивиране на проверката.
Неща за вършене:
- Приемете реквизитите за валидиране
- Подавайте проверка за проверка в App.js, за да покажете как работи
Тук добавяме някои подпори, които приемат булева стойност. Ако те са зададени на false при предаване на проп, валидирането вече няма да се използва.
Нека добавим няколко троични елемента вътре в useEffect, които ще се изпълняват, ако те са верни, и няма да се изпълняват, ако са неверни.
Страхотно! Сега последната стъпка, за да покажем, че това работи, нека отидем до нашия App.js и предадем подпора, за да изключим едно от тях.
Уау! Вече направихте куката си още по-персонализирана!
Разширено персонализиране: Бърз старт
Ето предварителното репо за github.
Благодаря отново за четенето!
Вижте някои от другите ми популярни статии.
