Acasă Adult66 Validarea unui formular de autentificare cu reactie

Adult66

Validarea unui formular de autentificare cu reactie

148

Pentru aproape fiecare formular pe care il creati, veti dori un fel de validare. In React, lucrul cu si validarea formularelor poate fi un pic verbos, asa ca in acest articol vom folosi un pachet numit Formik pentru a ne ajuta!

TLDR

Creati un proiect React
Adaugati pachetele Formik (si Yup)
Personalizati componenta Formik cu un apel de apel onSubmit si o functie de validare pentru mesajele de eroare
apoi afisati mesajele de eroare catre utilizator.> Vizualizati codul final pe CodeSandbox!

Iata un pic varf la ceea ce vom crea.

Crearea proiectului React

Pentru aceasta demo, voi folosi CodeSandbox. Puteti utiliza, de asemenea, CodeSandbox sau puteti utiliza mediul local. Cu totul depinde de tine.

Indiferent de ceea ce utilizati pentru aceasta demo, trebuie sa incepeti cu o noua aplicatie React utilizand Create React App. In CodeSandbox, voi alege sa fac doar asta.

Instalarea pachetelor necesare

Acum ca avem proiectul initial creat, trebuie sa instalam trei pachete.

Formik – simplifica gestionarea validarii, mesajelor de eroare si transmiterii formularelor
Email-validator – pachet mic pentru validarea e-mailurilor (sper ca acesta este explicativ:)
Yup – validator de schema care este utilizat in mod obisnuit impreuna cu Formik

Formik

In terminalul dvs., va trebui sa instalati Formik.

Upgrade-ti JS-ul

Du-te de la vanilie JavaScript ???? Reactiona

npm instala Formik

Voi face acelasi lucru in GUI de dependenta CodeSandbox.

E-mail-Validator

Acum instalati e-mail-validator.

npm instalati e-mail-validator

Din nou instalarea din GUI CodeSandbox.

Da

npm instalati Yup

Si din nou in CodeSandbox.

Crearea componentei formularului validat

Acum, putem incepe sa ne impiedicam ValidatedFormComponent. Deocamdata, dorim doar sa cream elementele de baza si sa le importam in fisierul radacina din aplicatie pentru a-l afisa.

Creati o componenta functionala noua
Adaugati continut afisat manechin
Import in index.js

Asadar, creati un fisier nou in directorul src ** numit ValidatedLoginForm.js. ** In interiorul fisierului, adaugati codul de baza pentru o componenta functionala.

import Reacteaza din „reactioneaza”; const ValidatedLoginForm = () => (<div> <h1> Componenta de forma validata </h1> </div>); export implicit ValidatedLoginForm;

Apoi, includeti-l in fisierul dvs. index.js.

functie App () {return (<div className = “App”> <ValidatedLoginForm /> </div>); }

si ar trebui sa-l vedeti afisat.

Acum, sa incepem cu lucrurile Formik. Mai intai, importati Formik, Email-Valiator si Yup in noua dvs. componenta.

import {Formik} din “formik”; import _ ca EmailValidator de la “email-validator”; import _ ca Yup din “yup”;

Acum, haideti sa scoatem eticheta Formik cu valorile initiale. Ganditi-va la valorile initiale ca la stabilirea starii initial.

De asemenea, veti avea nevoie de un apel de apel onSubmit. Acest apel invers va lua doi parametri, * valori * si un obiect pe care il putem distruge. Valorile reprezentau valorile de intrare din formularul dvs. Adaug aici un cod fals in scopul de a simula un apel de conectare async, apoi ma deconectez care sunt valorile.

In callback, sun si functia setSubmitting care a fost distrusa din al doilea parametru. Acest lucru ne va permite sa activam / dezactivati butonul de trimitere in timp ce se intampla apelul de conectare asincron.

<Formik initialValues = {{email: “”, parola: “”}} onSubmit = {(valori, {setSubmitting}) => {setTimeout (() => {console.log (“Logare”, valori); setSubmitting (fals);}, 500); }}> <h1> Formular de autentificare validat </h1> </Formik>

Recomandari de redare

Componenta Formik foloseste recuzele de randare pentru a furniza anumite variabile si functii la forma pe care o cream. Daca nu sunteti foarte familiarizat cu recuzita de redare, as lua o secunda pentru a vedea Render Props Explained.

Pe scurt, recuzele de redare sunt utilizate pentru a transmite proprietatilor copiilor elementele unei componente. In acest caz, Formik va transmite proprietati codului nostru de formular, care este copilul. Observati ca folosesc distrugerea pentru a obtine o referinta la mai multe variabile si functii specifice.

{props => {const {valori, atins, erori, isSubmitting, handleChange, handleBlur, handleSubmit} = popi; returnare (<div> <h1> Formular de autentificare validat </h1> </div>); }}

Afisati formularul

Acum, putem incepe de fapt sa scriem codul pentru a afisa formularul. Pentru ceea ce merita, in CodeSandbox finalizat am creat si o componenta LoginForm. * Js * pentru a arata cum sunt gestionate de la zero formularele de autentificare de baza. Puteti utiliza acest lucru si ca referinta pentru formularul pe care il vom adauga acum.

Formularul este destul de simplu cu doua intrari (e-mail si parola), etichete pentru fiecare si un buton de trimitere.

{props => {const {valori, atins, erori, isSubmitting, handleChange, handleBlur, handleSubmit} = popi; returnare (<formular onSubmit = {handleSubmit}> <label htmlFor = “email”> Email </label> <input name = “email” type = “text” placeholder = “Introduceti e-mailul” /> <label htmlFor = “email “> Parola </label> <input name =” password “type =” parola “placeholder =” Introduceti parola “/> <button type =” submit “> Logare </button> </form>); }}

Observati ca * onSubmit * apeleaza * handleSubmit * din recuzita.

Am mentionat earleir ca am putea dezactiva butonul nostru de trimitere in timp ce utilizatorul incearca deja sa se autentifice. Putem adauga acea mica modificare acum folosind proprietatea * isSubmitting * pe care am distrus-o din popi de mai sus.

<button type = “submit “abled = {isSubmitting}> Login </button>

As recomanda adaugarea CSS si de la CodeSandbox finalizat. In caz contrar, nu veti obtine efectul complet. Puteti copia css-ul de mai jos in fisierul dvs. styles.css.

.App {font-family: sans-serif; } h1 {text-align: center; } formular {max-latime: 500px; latime: 100%; marja: 0 auto; } eticheta, intrare {afisare: bloc; latime: 100%; } eticheta {margine-jos: 5px; inaltime: 22px; } intrare {margine-jos: 20px; captusire: 10px; raza de granita: 3px; granita: 1px solid # 777; } input.error {border-color: red; } .input-feedback {color: rgb (235, 54, 54); margin-top: -15px; font-size: 14px; margine-jos: 20px; } buton {padding: 10px 15px; culoare de fundal: rgb (70, 153, 179); culoare alba; granita: 1px rgb solid (70, 153, 179); culoare de fundal: 250ms; } buton: hover {cursor: pointer; fundal-culoare: alb; culoare: rgb (70, 153, 179); }

Adaugarea logicii mesajelor de validare

Acum trebuie sa ne dam seama cum sa ne validam intrarile. Prima intrebare este: ce constrangeri vrem sa avem pe contributia noastra. Sa incepem cu e-mailul. Intrarea prin e-mail ar trebui …

Este cerut
Aratati ca un e-mail real

Introducerea parolei ar trebui …

Este cerut
Aveti o lungime de cel putin 8 caractere
contin cel putin un numar

Vom acoperi doua moduri de a crea aceste mesaje, unul folosind Yup si unul facand singur. Va recomandam sa folositi Yup si veti vedea de ce in scurt timp.

Fa-o tu insuti

Prima optiune este crearea functiei noastre de validare. Scopul functiei este acela de a itera prin valorile formei noastre, de a valida aceste valori in orice fel consideram potrivit si de a returna un obiect * erorilor care are perechi de valori cheie de * valoare-> mesaj.

In interiorul etichetei Formik, puteti adauga urmatorul cod. Aceasta va adauga intotdeauna o eroare „E-mail nevalid” pentru e-mail. Vom incepe cu asta si vom pleca de acolo.

validate = {valori => {let erori = {}; errors.email = “E-mail nevalid”; erori de retur; }}

Acum, ne putem asigura ca utilizatorul a introdus ceva pentru e-mail.

validate = {valori => {let erori = {}; if (! valori.email) {errors.email = “Obligatoriu”; } erori de retur; }}

Apoi, putem verifica daca e-mailul este de fapt un e-mail cu aspect valid, folosind pachetul de e-mail-validator. Acest lucru va arata aproape la fel ca verificarea echivalenta a e-mailului.

Acesta are grija de e-mail, deci acum pentru parola. Mai intai putem verifica daca utilizatorul introduce ceva.

validate = {valori => {let erori = {}; if (! valori.password) {errors.password = “Obligatoriu”; } erori de retur; }}

Acum trebuie sa verificam ca lungimea sa fie de cel putin 8 caractere.

validate = {valori => {const passwordRegex = /(?=.*[0-9 Alan)/; if (! valori.password) {errors.password = “Obligatoriu”; } else if (valori.password.length <8) {errors.password = “Parola trebuie sa aiba 8 caractere.”; } erori de retur; }}

Si in sfarsit, faptul ca parola contine cel putin un numar. Pentru aceasta, putem folosi regex.

validate = {valori => {let erori = {}; const passwordRegex = /(?=.*[0-9 Alan)/; if (! valori.password) {errors.password = “Obligatoriu”; } else if (valori.password.length <8) {errors.password = “Parola trebuie sa aiba 8 caractere.”; } else if (! passwordRegex.test (valori.password)) {errors.password = “Parola Invalida. Trebuie sa contina un numar”; } erori de retur; }}

Iata totul.

validate = {valori => {let erori = {}; if (! valori.email) {errors.email = “Obligatoriu”; } else if (! EmailValidator.validate (valori.email)) {errors.email = “Adresa de e-mail nevalida”; } const passwordRegex = /(?=.*[0-9 Alan)/; if (! valori.password) {errors.password = “Obligatoriu”; } else if (valori.password.length <8) {errors.password = “Parola trebuie sa aiba 8 caractere.”; } else if (! passwordRegex.test (valori.password)) {errors.password = “Parola Invalida. Trebuie sa contina un numar”; } erori de retur; }}

Utilizarea Yup (recomandat)

Este posibil sa fi observat ca manipularea logicii de validare pe cont propriu devine un pic verbala. Trebuie sa facem manual toate verificarile. Nu a fost chiar asa de rau, dar cu pachetul Yup, devine cu atat mai usor!

Yup este modalitatea recomandata de a gestiona mesajele de validare.

Yup face ca validarea intrarii sa devina o adiere!

Cand folositi Yup, nu vom mai vedea proprietatea Validare * , ci utilizarea insead * validareSchema. Sa incepem cu e-mailul. Iata validarea echivalenta folosind Yup.

validationSchema = {Yup.object (). forma ({email: Yup.string () .email () .required (“Obligatoriu”)})}

Mult mai scurt nu ?! Acum, pentru parola.

validationSchema = {Yup.object ().

forma ({email: Yup.string () .email () .required (“Obligatoriu”), parola: Yup.string () .required (“Nu este furnizata nicio parola.”) .min (8, “Parola este prea scurta – ar trebui sa fie minim 8 caractere.”) .Matches (/ (? =. * [0-9]) /, “Parola trebuie sa contina un numar.”)})}}

Destul de dulce!

Afisarea mesajelor de validare / eroare

Acum ca avem logica pentru crearea de mesaje de eroare, trebuie sa le afisam. Va trebui sa actualizam putin intrarile sub forma noastra.

Trebuie sa actualizam mai multe proprietati atat pentru intrarile de e-mail, cat si pentru parola.

valoare
cu privire la schimbarile
onblur
numele clasei

E-mail

Sa incepem prin actualizarea valorii, onChange si onBlur. Fiecare dintre acestea va folosi proprietati din recuzita de randare.

Apoi putem adauga o clasa conditionata de „eroare” daca exista erori. Putem verifica existenta erorilor, analizand obiectul erorilor (remeber cum am calculat acel obiect noi inapoi cand).

De asemenea, putem verifica proprietatea atinsa, pentru a vedea daca utilizatorul a interactionat sau nu cu intrarea de e-mail inainte de a afisa un mesaj de eroare.

Si in sfarsit, daca exista erori, le vom afisa utilizatorului. In total, e-mailul va arata astfel.

<label htmlFor = “email”> Email </label> <input name = “email” type = “text” placeholder = “Introduceti e-mailul dvs.” value = {valori.email} onChange = {handleChange} onBlur = {handleBlur} className = {errors.email && Touch.email && “error”} /> {errors.email && Touch.email && (<div className = “input-feedback”> {errors.email} </div>)}

Parola

Acum trebuie sa facem acelasi lucru cu parola. Nu voi parcurge fiecare pas, pentru ca sunt exact la fel ca e-mailul. Iata codul final.

<label htmlFor = “email”> Parola </label> <input name = “password” type = “parola” placeholder = “Introduceti parola” value = {valori.password} onChange = {handleChange} onBlur = {handleBlur} className = {errors.password && Touch.password && “error”} /> {errors.password && Touch.password && (<div className = “input-feedback”> {errors.password} </div>)}

Testeaza-l

Sa incercam! Puteti incepe facand clic pe butonul fara a introduce nimic. Ar trebui sa vedeti mesaje de validare.

Acum, putem obtine mai specifice pentru testarea mesajelor. Reimprospatati-va pagina pentru a face acest lucru. Faceti clic pe intrarea e-mailului, dar nu tastati nimic.

Apoi, faceti clic departe de intrare. Ar trebui sa vedeti mesajul „Obligatoriu”. Retineti ca acest mesaj nu apare automat atunci cand pagina se incarca. Vrem sa afisam mesaje de eroare numai dupa ce utilizatorul a interactionat cu intrarea.

Acum, incepe sa tastati. Ar trebui sa primiti un mesaj despre faptul ca nu sunteti un e-mail valid.

Si, in sfarsit, tastati un e-mail cu aspect valabil si mesajul dvs. de eroare va disparea.

Acum, la fel pentru parola. Faceti clic pe intrare, apoi departe si veti primi mesajul necesar.

Apoi, incepeti sa tastati si veti vedea validarea lungimii.

Apoi, tastati 8 sau mai multe caractere care nu includ un numar si veti vedea mesajul „trebuie sa contina un numar”.

Si, in sfarsit, adaugati un numar si mesajele de eroare dispar.

Concluzie

Whew, a fost unul lung! Din nou, validarea poate fi un lucru complicat, dar cu ajutorul catorva pachete devine ceva mai usor. La sfarsitul zilei, insa, cred ca avem un formular de autentificare destul de legitim!

Iti place acest articol? Urmariti pe @jamesqquick pe Twitter

Validarea unui formular de autentificare cu reactie

TLDR

Crearea proiectului React

Instalarea pachetelor necesare

Formik

E-mail-Validator

Da

Crearea componentei formularului validat

Recomandari de redare

Afisati formularul

Adaugarea logicii mesajelor de validare

Fa-o tu insuti

Utilizarea Yup (recomandat)

Afisarea mesajelor de validare / eroare

E-mail

Parola

Testeaza-l

Concluzie

Populare

Afacere proprie, angajat la stat sau angajat la privat? Pro &...

Cum alegi cel mai bun brad de Crăciun?

Afla cum iti poti lansa o mica afacere folosind un spatiu...

Top 10 cele mai supraevaluate filme din toate timpurile

10 regizori care au facut un film de groaza si au...

10 documentare care au schimbat perceptia publicului

Top 10 interviuri controversate cu celebritati din toate timpurile

Top 10 cele mai memorabile momente ale premiilor Oscar

Cum se schimba viata atunci cand intri in cercurile sociale ale...

10 povesti ciudate din lumea rap pe care sa le cunosti