Oletko koskaan yrittänyt lähettää lomaketta vain, jotta verkkosivu antaa sinulle virheilmoituksen, joka kertoo, että yksi tai useampi kentistä on virheellinen? Jos näin on, olet kokenut lomakkeen validoinnin.

Validointi on usein välttämätöntä puhtaiden ja käyttökelpoisten tietojen saamiseksi. Sähköpostiosoitteista päivämääriin, jos sen on oltava tarkka, sinun on tarkistettava se huolellisesti.

Mikä on lomakkeen validointi?

Lomakkeen validointi on prosessi, jolla varmistetaan, että käyttäjän lomakkeelle syöttämät tiedot ovat oikein ja täydellisiä. Voit tehdä tämän asiakaspuolella käyttämällä sisäänrakennettuja HTML-ominaisuuksia, kuten vaadittua attribuuttia. Voit myös vahvista asiakkaalla JavaScriptin avulla, ja on olemassa ulkoisia Next.js-kirjastoja, jotka helpottavat prosessia.

Lomakkeen validointi on välttämätöntä useista syistä. Ensinnäkin se auttaa varmistamaan, että lomakkeelle syötetyt tiedot ovat täydellisiä ja oikein. Tämä on tärkeää, koska se auttaa estämään virheet, kun sovellus lähettää tietoja palvelimelle tai tietokantaan.

instagram viewer

Toiseksi lomakkeen validointi voi auttaa parantamaan lomakkeen käytettävyyttä antamalla palautetta, kun käyttäjä syöttää virheellisiä tietoja. Tämä voi auttaa välttämään käyttäjän turhautumista ja hämmennystä.

Lopuksi lomakkeen validointi voi auttaa parantamaan lomakkeen turvallisuutta varmistamalla, että se lähettää vain kelvollisia tietoja.

Lomakkeiden vahvistaminen Next.js: ssä

On olemassa kaksi tapaa vahvistaa lomakkeita Next.js: ssä: käyttämällä sisäänrakennettuja menetelmiä tai ulkoisia kirjastoja.

Sisäänrakennettujen menetelmien käyttäminen

HTML tarjoaa useita menetelmiä lomakkeiden vahvistamiseen, joista yleisin on edellytetään attribuutti. Tämä varmistaa, että kenttä ei voi olla tyhjä. Voit käyttää tätä menetelmää Next.js-sovelluksessasi yksinkertaisesti sisällyttämällä attribuutin luomiisi syöttötageihin. HTML tarjoaa myös a kuvio attribuutti. Voit käyttää tätä yhdessä a säännöllinen lauseke monimutkaisempaa validointia varten.

Tämä esimerkki sisältää lomakkeen, jossa on kaksi kenttää: nimi ja sähköpostiosoite. Nimikenttä on pakollinen, ja sähköpostikentän on vastattava säännöllistä lauseketta.

tuonti Reagoi alkaen 'reagoi'
luokkaaOma LomakeulottuuReagoi.Komponentti{
 render() {
palata (
<muodossa >
<etiketti>
 Nimi:
<syöttötyyppi="teksti" nimi ="nimi" edellytetään />
</label>
<etiketti>
 Sähköposti:
<syöttötyyppi="sähköposti" nimi ="sähköposti"
 malli ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<syöttötyyppi="Lähetä" arvo ="Lähetä" />
</form>
 )
 }
}
viedäoletuksena Oma Lomake

Tämä koodi tuo React-kirjaston, luo sitten luokan nimeltä MyForm ja renderöi lomakeelementin. Lomakeelementin sisällä on kaksi etikettielementtiä.

Ensimmäinen tarraelementti sisältää pakollisen tekstinsyöttökentän. Toinen tarraelementti sisältää sähköpostin syöttökentän, jonka malliattribuutissa on säännöllinen lauseke.

Lopuksi sinulla on lähetyspainike. Kun käyttäjä lähettää lomakkeen, vaadittu määrite varmistaa, että hän täytti nimikentän. Sähköpostikentän mallimäärite varmistaa, että sähköposti on määritetyssä muodossa. Jos jompikumpi näistä ehdoista ei täyty, lomaketta ei lähetetä.

Sisäänrakennettujen menetelmien käytössä on muutamia haittoja. Ensinnäkin voi olla vaikeaa seurata kaikkia määrittämiäsi erilaisia ​​vahvistussääntöjä. Toiseksi, jos sinulla on paljon kenttiä, voi olla tylsää lisätä vaadittu attribuutti jokaiseen. Lopuksi sisäänrakennetut menetelmät tarjoavat vain perusvarmennusta. Jos haluat tehdä monimutkaisempaa validointia, sinun on käytettävä ulkoista kirjastoa.

Ulkoisen kirjaston käyttäminen

Sisäänrakennettujen menetelmien lisäksi on myös monia ulkoisia kirjastoja, joita voit käyttää lomakkeiden vahvistamiseen. Joitakin suosittuja kirjastoja ovat Formik, react-hook-form ja Yup.

Jos haluat käyttää ulkoista kirjastoa, sinun on ensin asennettava se. Jos haluat esimerkiksi asentaa Formikin, suorita seuraava komento:

npm Asentaa formik

Kun olet asentanut kirjaston, voit tuoda sen komponenttiin ja käyttää sitä lomakkeen vahvistamiseen:

tuonti Reagoi alkaen 'reagoi'
tuonti { Muoto, lomake, kenttä } alkaen "formik"
konst Oma Lomake = () => (
<Formik
 originalValues={{ nimi: '', sähköposti: '' }}
 validate={arvot => {
konst virheet = {}
jos (!arvot.nimi) {
 errors.name = 'Edellytetään'
 }
jos (!arvot.email) {
 errors.email = 'Edellytetään'
 } muujos (
 !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
 ) {
 errors.email = 'Virheellinen sähköpostiosoite'
 }
palata virheitä
 }}
 onSubmit={(arvot, { setSubmitting }) => {
 setTimeout(() => {
 hälytys (JSON.stringify (arvot, tyhjä, 2))
 setSubmitting(väärä)
 }, 400)
 }}
>
 {({ isSubmitting }) => (
<Lomake>
<Kentän tyyppi ="teksti" nimi ="nimi" />
<Kentän tyyppi ="sähköposti" nimi ="sähköposti" />
<painikkeen tyyppi="Lähetä" poistettu käytöstä={isSubmitting}>
 Lähetä
</button>
</Form>
 )}
</Formik>
)
viedäoletuksena Oma Lomake

Tässä tuot ensin Formik, Lomake, ja Ala komponentit Formik-kirjastosta. Luo seuraavaksi komponentti nimeltä MyForm. Tämä komponentti luo lomakkeen, jossa on kaksi kenttää: nimi ja sähköpostiosoite.

InitialValues-ehdotus asettaa lomakekenttien alkuarvot. Tässä tapauksessa nimi- ja sähköpostikentät ovat molemmat tyhjiä merkkijonoja.

Vahvistusehdotus määrittää lomakekenttien vahvistussäännöt. Tässä tapauksessa nimikenttä on pakollinen, ja sähköpostikentän tulee vastata säännöllistä lauseketta.

OnSubmit-ehdotus määrittää toiminnon, jota React kutsuu, kun käyttäjä lähettää lomakkeen. Tässä tapauksessa funktio on hälytys, joka näyttää lomakekenttien arvot.

IsSubmitting-ehdotus määrittää, lähetetäänkö lomaketta parhaillaan. Tässä tapauksessa asetat sen arvoon false.

Suorita lopuksi lomake Formikin Form-komponentilla.

Ulkoisten kirjastojen käytön edut Next.js: ssä

Ulkoisen kirjaston, kuten Formikin, käyttämisessä Next.js: n lomakkeiden tarkistamiseen on useita etuja. Yksi etu on, että virheilmoitusten näyttäminen käyttäjälle on paljon helpompaa. Jos esimerkiksi pakollista kenttää ei ole täytetty, Formik näyttää automaattisesti virheilmoituksen, joka sisältää korjausehdotuksen.

Toinen etu on, että Formik pystyy käsittelemään monimutkaisempia validointisääntöjä. Voit esimerkiksi käyttää Formikia vahvistamaan, että kaksi kenttää ovat samat (kuten salasana ja salasanan vahvistuskenttä).

Lopuksi Formik helpottaa lomaketietojen lähettämistä palvelimelle. Voit esimerkiksi lähettää lomaketiedot API: lle Formikin avulla.

Lisää käyttäjien sitoutumista lomakkeiden avulla

Voit lisätä käyttäjien sitoutumista lomakkeiden avulla. Antamalla palautetta, kun käyttäjä syöttää virheellisiä tietoja, voit auttaa välttämään turhautumista ja sekaannusta.

Ulkoisten kirjastojen avulla voit lisätä ominaisuuksia, kuten automaattisen täydennyksen ja ehdollisia kenttiä. Nämä voivat auttaa tekemään lomakkeistasi entistä käyttäjäystävällisempiä. Oikein käytettynä lomakkeet voivat olla tehokas työkalu, joka auttaa sinua lisäämään käyttäjien sitoutumista ja keräämään tarvitsemaasi dataa.

Validoinnin lisäksi Next.js: ssä on monia ominaisuuksia, joiden avulla voit lisätä käyttäjien sitoutumista.