Ar kada nors bandėte pateikti formą, kad tinklalapyje būtų rodomas klaidos pranešimas, nurodantis, kad vienas ar keli laukai yra neteisingi? Jei taip, vadinasi, jūs patyrėte formos patvirtinimą.
Patvirtinimas dažnai yra būtinas norint gauti švarius, tinkamus naudoti duomenis. Nuo el. pašto adresų iki datų, jei ji turi būti tiksli, turite ją atidžiai patikrinti.
Kas yra formos patvirtinimas?
Formos patvirtinimas – tai procesas, kuriuo užtikrinama, kad vartotojo į formą įvesti duomenys yra teisingi ir išsamūs. Tai galite padaryti kliento pusėje naudodami integruotas HTML funkcijas, pvz., reikalingą atributą. Tu taip pat gali patvirtinkite klientą naudodami „JavaScript“., ir yra išorinių Next.js bibliotekų, kurios palengvina procesą.
Yra keletas priežasčių, kodėl formos patvirtinimas yra būtinas. Pirma, tai padeda užtikrinti, kad į formą įvesti duomenys būtų išsamūs ir teisingi. Tai svarbu, nes padeda išvengti klaidų, kai programa pateikia duomenis į serverį arba duomenų bazę.
Antra, formos patvirtinimas gali padėti pagerinti formos naudojimą, nes vartotojas įveda neteisingus duomenis. Tai gali padėti išvengti vartotojo nusivylimo ir painiavos.
Galiausiai, formos patvirtinimas gali padėti pagerinti formos saugumą užtikrinant, kad ji pateiktų tik tinkamus duomenis.
Kaip patvirtinti formas Next.js
Yra du būdai, kaip patvirtinti formas Next.js: naudojant integruotus metodus arba išorines bibliotekas.
Integruotų metodų naudojimas
HTML pateikia keletą formų patvirtinimo metodų, iš kurių labiausiai paplitęs yra reikalaujama atributas. Tai užtikrina, kad laukas negali būti tuščias. Galite naudoti šį metodą naudodami Next.js programą, tiesiog įtraukdami atributą į sugeneruotas įvesties žymas. HTML taip pat suteikia a modelis atributas. Tai galite naudoti kartu su a reguliarioji išraiška sudėtingesniam patvirtinimui.
Šiame pavyzdyje yra forma su dviem laukais: vardas ir el. pašto adresas. Vardo laukas yra būtinas, o el. pašto laukas turi atitikti reguliarųjį posakį.
importuoti Reaguoti iš 'reaguoti'klasėMano formatęsiasiReaguoti.Komponentas{
render() {
grąžinti (
<forma >
<etiketė>
Vardas:
<įvesties tipas ="tekstą" vardas ="vardas" reikalingas />
</label>
<etiketė>
El. paštas:
<įvesties tipas ="paštu" vardas ="paštu"
modelis ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<įvesties tipas ="Pateikti" vertė ="Pateikti" />
</form>
)
}
}
eksportuotinumatytas Mano forma
Šis kodas importuoja „React“ biblioteką, tada sukuria klasę pavadinimu „MyForm“ ir pateikia formos elementą. Formos elemento viduje yra du etiketės elementai.
Pirmajame etiketės elemente yra būtinas teksto įvesties laukas. Antrajame etiketės elemente yra el. pašto įvesties laukas, kurio šablono atribute yra reguliarioji išraiška.
Galiausiai turite mygtuką pateikti. Kai vartotojas pateikia formą, būtinas atributas užtikrina, kad jis užpildė vardo lauką. El. pašto lauko šablono atributas užtikrina, kad el. laiškas yra nurodyto formato. Jei kuri nors iš šių sąlygų neatitinka, forma nebus pateikta.
Naudojant integruotus metodus yra keletas trūkumų. Pirma, gali būti sunku sekti visas skirtingas nustatytas patvirtinimo taisykles. Antra, jei turite daug laukų, gali būti nuobodu prie kiekvieno pridėti reikiamą atributą. Galiausiai, integruoti metodai suteikia tik pagrindinį patvirtinimą. Jei norite atlikti sudėtingesnį patvirtinimą, turėsite naudoti išorinę biblioteką.
Išorinės bibliotekos naudojimas
Be integruotų metodų, taip pat yra daug išorinių bibliotekų, kurias galite naudoti formoms patvirtinti. Kai kurios populiarios bibliotekos yra „Formik“, „react-hook-form“ ir „Yup“.
Norėdami naudoti išorinę biblioteką, pirmiausia turėsite ją įdiegti. Pavyzdžiui, norėdami įdiegti Formik, paleiskite šią komandą:
npm diegti formikĮdiegę biblioteką, galite ją importuoti į savo komponentą ir naudoti formą patvirtinti:
importuoti Reaguoti iš 'reaguoti'
importuoti { Forma, forma, laukas } iš "formikas"konst Mano forma = () => (
<Formik
pradinės reikšmės={{ pavadinimas: '', el. paštas: '' }}
patvirtinti={reikšmės => {
konst klaidos = {}
jeigu (!vertybes.vardas) {
klaidos.vardas = 'Privaloma'
}
jeigu (!vertybes.email) {
errors.email = 'Privaloma'
} Kitasjeigu (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
) {
errors.email = 'Neteisingas el. pašto adresas'
}
grąžinti klaidų
}}
onSubmit={(reikšmės, { setSubmitting }) => {
setTimeout(() => {
budrus(JSON.stringify (vertės, nulinis, 2))
setSubmitting(klaidinga)
}, 400)
}}
>
{({ isSubmitting }) => (
<Forma>
<Lauko tipas ="tekstą" vardas ="vardas" />
<Lauko tipas ="paštu" vardas ="paštu" />
<mygtuko tipas="Pateikti" išjungta={isSubmitting}>
Pateikti
</button>
</Form>
)}
</Formik>
)
eksportuotinumatytas Mano forma
Čia pirmiausia importuojate Formik, Forma, ir Laukas komponentai iš Formik bibliotekos. Tada sukurkite komponentą pavadinimu MyForm. Šis komponentas pateikia formą, kurioje yra du laukai: vardas ir el. pašto adresas.
Pradinės reikšmės pasiūlymas nustato pradines formos laukų reikšmes. Šiuo atveju vardo ir el. pašto laukai yra tuščios eilutės.
Patvirtinimo pasiūlymas nustato formos laukų patvirtinimo taisykles. Šiuo atveju pavadinimo laukas yra būtinas, o el. pašto laukas turi atitikti įprastą posakį.
„OnSubmit“ pasiūlymas nustato funkciją, kurią „React“ iškvies, kai vartotojas pateiks formą. Šiuo atveju funkcija yra įspėjimas, rodantis formos laukų reikšmes.
„isSubmitting“ pasiūlymas nustato, ar forma šiuo metu teikiama. Šiuo atveju jūs nustatote jį į false.
Galiausiai atkurkite formą naudodami Formik komponentą Form.
Išorinių bibliotekų naudojimo Next.js pranašumai
Yra keletas privalumų, kai naudojate išorinę biblioteką, pvz., „Formik“, kad patvirtintumėte formas „Next.js“. Vienas iš privalumų yra tai, kad vartotojui daug lengviau rodyti klaidų pranešimus. Pavyzdžiui, jei neužpildytas privalomas laukas, Formik automatiškai parodys klaidos pranešimą su siūlomu pataisymu.
Kitas privalumas yra tai, kad „Formik“ gali valdyti sudėtingesnes patvirtinimo taisykles. Pavyzdžiui, galite naudoti Formik, kad patvirtintumėte, ar du laukai yra vienodi (pvz., slaptažodžio ir slaptažodžio patvirtinimo laukai).
Galiausiai „Formik“ leidžia lengvai pateikti formos duomenis į serverį. Pavyzdžiui, galite naudoti Formik, kad pateiktumėte formos duomenis į API.
Padidinkite vartotojų įtraukimą naudodami formas
Norėdami padidinti vartotojų įsitraukimą, galite naudoti formas. Pateikdami atsiliepimą, kai vartotojas įveda neteisingus duomenis, galite padėti išvengti nusivylimo ir painiavos.
Naudodami išorines bibliotekas galite pridėti tokių funkcijų kaip automatinis užbaigimas ir sąlyginiai laukai. Tai gali padėti padaryti formas dar patogesnes. Tinkamai naudojamos formos gali būti galingas įrankis, padedantis padidinti vartotojų įsitraukimą ir rinkti reikalingus duomenis.
Be patvirtinimo, Next.js turi daug funkcijų, kurias galite naudoti norėdami padidinti vartotojų įsitraukimą.