Kas olete kunagi proovinud esitada vormi ainult selleks, et veebileht annaks teile veateate, mis ütleb, et üks või mitu välja on kehtetud? Kui jah, siis olete kogenud vormi valideerimist.
Valideerimine on sageli puhaste ja kasutatavate andmete saamiseks hädavajalik. Alates meiliaadressidest kuni kuupäevadeni, kui see peab olema täpne, peate seda hoolikalt kontrollima.
Mis on vormi kinnitamine?
Vormi valideerimine on protsess, millega tagatakse, et kasutaja poolt vormile sisestatud andmed on õiged ja täielikud. Saate seda teha kliendi poolel, kasutades sisseehitatud HTML-i funktsioone, nagu nõutav atribuut. Sa saad ka valideerida kliendil JavaScripti abil, ja protsessi hõlbustamiseks on olemas välised Next.js-i teegid.
Vormi kinnitamise oluliseks põhjuseks on mitu põhjust. Esiteks aitab see tagada, et vormi sisestatud andmed on täielikud ja õiged. See on oluline, kuna see aitab vältida vigu, kui teie rakendus andmeid serverisse või andmebaasi saadab.
Teiseks võib vormi valideerimine aidata parandada vormi kasutatavust, andes tagasisidet, kui kasutaja sisestab kehtetuid andmeid. See võib aidata vältida kasutaja frustratsiooni ja segadust.
Lõpuks võib vormi kinnitamine aidata parandada vormi turvalisust, tagades, et see esitab ainult kehtivaid andmeid.
Kuidas valideerida vorme rakenduses Next.js
Programmis Next.js on vormide kinnitamiseks kaks võimalust: kasutades sisseehitatud meetodeid või väliseid teeke.
Sisseehitatud meetodite kasutamine
HTML pakub vormide kinnitamiseks mitmeid meetodeid, millest levinuim on nõutud atribuut. See tagab, et väli ei saa olla tühi. Saate seda meetodit kasutada oma rakenduses Next.js, lisades atribuudi lihtsalt loodud sisendmärgenditesse. HTML pakub ka a muster atribuut. Saate seda kasutada koos a regulaaravaldis keerukamaks valideerimiseks.
See näide sisaldab kahe väljaga vormi: nimi ja e-post. Nimeväli on kohustuslik ja meiliväli peab ühtima regulaaravaldisega.
importida Reageerige alates 'reageeri'klassMinu vormulatubReageerige.Komponent{
render() {
tagasi (
<vormi >
<silt>
Nimi:
<sisendi tüüp="tekst" nimi ="nimi" nõutud />
</label>
<silt>
E-post:
<sisendi tüüp="email" nimi ="email"
muster="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<sisendi tüüp="Esita" väärtus="Esita" />
</form>
)
}
}
eksportidavaikimisi Minu vorm
See kood impordib Reacti teegi, loob seejärel klassi nimega MyForm ja renderdab vormielemendi. Vormielemendi sees on kaks sildielementi.
Esimene sildielement sisaldab nõutavat tekstisisestusvälja. Teine sildielement sisaldab meili sisestusvälja, mille mustri atribuudis on regulaaravaldis.
Lõpuks on teil esitamisnupp. Kui kasutaja vormi esitab, tagab nõutav atribuut, et ta täidab nimevälja. Meilivälja mustriatribuut tagab, et meil on määratud vormingus. Kui üks neist tingimustest ei vasta, siis vormi ei esitata.
Sisseehitatud meetodite kasutamisel on mõned puudused. Esiteks võib olla keeruline jälgida kõiki teie seadistatud erinevaid valideerimisreegleid. Teiseks, kui teil on palju välju, võib igale väljale vajaliku atribuudi lisamine olla tüütu. Lõpuks pakuvad sisseehitatud meetodid ainult põhilist valideerimist. Kui soovite teha keerukamat valideerimist, peate kasutama välist teeki.
Välise raamatukogu kasutamine
Lisaks sisseehitatud meetoditele on ka palju väliseid teeke, mida saate vormide kinnitamiseks kasutada. Mõned populaarsed raamatukogud hõlmavad Formik, react-hook-form ja Yup.
Välise teegi kasutamiseks peate selle esmalt installima. Näiteks Formiku installimiseks käivitage järgmine käsk:
npm installida formikKui olete teegi installinud, saate selle importida oma komponenti ja kasutada seda vormi kinnitamiseks.
importida Reageerige alates 'reageeri'
importida { Vorm, vorm, väli } alates 'formik'konst Minu vorm = () => (
<Formik
originalValues={{ nimi: '', email: '' }}
kinnitada={väärtused => {
konst vead = {}
kui (!väärtused.nimi) {
errors.name = 'Nõutud'
}
kui (!väärtused.e-post) {
errors.email = 'Nõutud'
} muidukui (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
) {
errors.email = 'vale emaili aadress'
}
tagasi vead
}}
onSubmit={(väärtused, { setSubmitting }) => {
setTimeout(() => {
hoiatus (JSON.stringify (väärtused, null, 2))
setSubmitting(vale)
}, 400)
}}
>
{({ on esitamine }) => (
<Vorm>
<Välja tüüp="tekst" nimi ="nimi" />
<Välja tüüp="email" nimi ="email" />
<nupu tüüp="Esita" keelatud={isSubmitting}>
Esita
</button>
</Form>
)}
</Formik>
)
eksportidavaikimisi Minu vorm
Siin peate esmalt importima Formik, Vorm, ja Väli komponendid Formiku raamatukogust. Järgmisena looge komponent nimega MyForm. See komponent renderdab vormi, millel on kaks välja: nimi ja e-post.
Algväärtuste prop määrab vormiväljade algväärtused. Sel juhul on nime ja e-posti väljad mõlemad tühjad stringid.
Valideerimisrekvisiit määrab vormiväljade valideerimisreeglid. Sel juhul on nimeväli kohustuslik ja meiliväli peaks vastama regulaaravaldisele.
Rekvisiit onSubmit määrab funktsiooni, mille React kutsub, kui kasutaja vormi esitab. Sel juhul on funktsioon hoiatus, mis kuvab vormiväljade väärtused.
Rekvisiit isSubmitting määrab, kas vormi praegu esitatakse. Sel juhul määrate selle valeks.
Lõpuks renderdage vorm Formiku komponendi Vorm abil.
Väliste teekide kasutamise eelised rakenduses Next.js
Välise teegi (nt Formik) kasutamisel Next.js-i vormide kinnitamiseks on mitmeid eeliseid. Üks eelis on see, et kasutajale on veateateid palju lihtsam kuvada. Näiteks kui nõutav väli on täitmata, kuvab Formik automaatselt veateate, mis sisaldab soovitatud parandust.
Teine eelis on see, et Formik saab hakkama keerulisemate valideerimisreeglitega. Näiteks saate Formiku abil kontrollida, kas kaks välja on samad (nt parool ja parooli kinnitusväli).
Lõpuks teeb Formik vormiandmete serverisse esitamise lihtsaks. Näiteks saate vormi andmete API-le edastamiseks kasutada Formikut.
Suurendage vormide abil kasutajate seotust
Kasutajate seotuse suurendamiseks saate kasutada vorme. Andes tagasisidet, kui kasutaja sisestab kehtetuid andmeid, saate aidata vältida frustratsiooni ja segadust.
Väliste teekide abil saate lisada selliseid funktsioone nagu automaatne täitmine ja tingimuslikud väljad. Need võivad aidata teie vorme veelgi kasutajasõbralikumaks muuta. Õige kasutamise korral võivad vormid olla võimas tööriist, mis aitab teil suurendada kasutajate seotust ja koguda vajalikke andmeid.
Lisaks valideerimisele on Next.js-il palju funktsioone, mida saate kasutada kasutajate seotuse suurendamiseks.
