Vai esat kādreiz mēģinājis iesniegt veidlapu, lai tīmekļa lapa parādītu kļūdas ziņojumu, norādot, ka viens vai vairāki lauki nav derīgi? Ja tā, tad esat pieredzējis veidlapas validāciju.
Validācija bieži ir būtiska, lai iegūtu tīrus, lietojamus datus. Sākot ar e-pasta adresēm un beidzot ar datumiem, ja tam jābūt precīzam, jums tas rūpīgi jāpārbauda.
Kas ir veidlapas apstiprināšana?
Veidlapas validācija ir process, kas nodrošina, ka lietotāja veidlapā ievadītie dati ir pareizi un pilnīgi. To var izdarīt klienta pusē, izmantojot iebūvētos HTML līdzekļus, piemēram, nepieciešamo atribūtu. Jūs varat arī validēt klientā, izmantojot JavaScript, un ir ārējās Next.js bibliotēkas, kas palīdz atvieglot procesu.
Ir vairāki iemesli, kāpēc veidlapas apstiprināšana ir būtiska. Pirmkārt, tas palīdz nodrošināt, ka veidlapā ievadītie dati ir pilnīgi un pareizi. Tas ir svarīgi, jo tas palīdz novērst kļūdas, kad jūsu lietotne iesniedz datus serverī vai datu bāzē.
Otrkārt, veidlapas validācija var palīdzēt uzlabot veidlapas lietojamību, sniedzot atsauksmes, kad lietotājs ievada nederīgus datus. Tas var palīdzēt izvairīties no neapmierinātības un apjukuma no lietotāja puses.
Visbeidzot, veidlapas validācija var palīdzēt uzlabot veidlapas drošību, nodrošinot, ka tā iesniedz tikai derīgus datus.
Veidlapu validēšana vietnē Next.js
Ir divi veidi, kā pārbaudīt veidlapas programmā Next.js: izmantojot iebūvētās metodes vai ārējās bibliotēkas.
Iebūvēto metožu izmantošana
HTML nodrošina vairākas veidlapu apstiprināšanas metodes, no kurām visizplatītākā ir nepieciešams atribūts. Tas nodrošina, ka lauks nevar būt tukšs. Varat izmantot šo metodi savā lietotnē Next.js, vienkārši iekļaujot atribūtu ģenerētajos ievades tagos. HTML nodrošina arī a modelis atribūts. Varat to izmantot kopā ar a regulārā izteiksme sarežģītākai validācijai.
Šajā piemērā ir iekļauta veidlapa ar diviem laukiem: vārds un e-pasts. Nosaukuma lauks ir obligāts, un e-pasta laukam ir jāatbilst regulārajai izteiksmei.
imports Reaģēt no 'reaģēt'klasēMana veidlapapagarinaReaģēt.Komponents{
render() {
atgriezties (
<formā >
<etiķete>
Vārds:
<ievades veids="tekstu" vārds ="nosaukums" nepieciešams />
</label>
<etiķete>
E-pasts:
<ievades veids="e-pasts" vārds ="e-pasts"
modelis ="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<ievades veids="Iesniegt" vērtība="Iesniegt" />
</form>
)
}
}
eksportētnoklusējuma Mana veidlapa
Šis kods importē React bibliotēku, pēc tam izveido klasi ar nosaukumu MyForm un atveido formas elementu. Veidlapas elementa iekšpusē ir divi etiķetes elementi.
Pirmajā etiķetes elementā ir obligāts teksta ievades lauks. Otrais etiķetes elements satur e-pasta ievades lauku ar regulāru izteiksmi tā modeļa atribūtā.
Visbeidzot, jums ir iesniegšanas poga. Kad lietotājs iesniedz veidlapu, nepieciešamais atribūts nodrošina, ka viņš aizpilda nosaukuma lauku. E-pasta lauka raksta atribūts nodrošina, ka e-pasts ir norādītajā formātā. Ja kāds no šiem nosacījumiem neatbilst, veidlapa netiks iesniegta.
Iebūvēto metožu izmantošanai ir daži trūkumi. Pirmkārt, var būt grūti izsekot visiem dažādajiem jūsu iestatītajiem validācijas noteikumiem. Otrkārt, ja jums ir daudz lauku, var būt apnicīgi katram no tiem pievienot nepieciešamo atribūtu. Visbeidzot, iebūvētās metodes nodrošina tikai pamata validāciju. Ja vēlaties veikt sarežģītāku validāciju, jums būs jāizmanto ārēja bibliotēka.
Izmantojot ārējo bibliotēku
Papildus iebūvētajām metodēm ir arī daudzas ārējās bibliotēkas, kuras varat izmantot, lai apstiprinātu veidlapas. Dažas populāras bibliotēkas ietver Formik, react-hook-form un Yup.
Lai izmantotu ārēju bibliotēku, vispirms tā ir jāinstalē. Piemēram, lai instalētu Formik, palaidiet šādu komandu:
npm uzstādīt formikKad esat instalējis bibliotēku, varat to importēt savā komponentā un izmantot veidlapas apstiprināšanai.
imports Reaģēt no 'reaģēt'
imports { Form, Form, Field } no 'formik'konst Mana veidlapa = () => (
<Formik
originalValues={{ nosaukums: '', e-pasts: '' }}
validēt={vērtības => {
konst kļūdas = {}
ja (!vērtības.nosaukums) {
errors.name = 'Obligāti'
}
ja (!vērtības.e-pasts) {
errors.email = 'Obligāti'
} citsja (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (values.email)
) {
errors.email = 'nederīga e-pasta adrese'
}
atgriezties kļūdas
}}
onSubmit={(vērtības, { setSubmitting }) => {
setTimeout(() => {
brīdināt (JSON.stringify (vērtības, null, 2))
setSubmitting(viltus)
}, 400)
}}
>
{({ isSubmitting }) => (
<Veidlapa>
<Lauka veids="tekstu" vārds ="nosaukums" />
<Lauka veids="e-pasts" vārds ="e-pasts" />
<pogas veids="Iesniegt" atspējots={isSubmitting}>
Iesniegt
</button>
</Form>
)}
</Formik>
)
eksportētnoklusējuma Mana veidlapa
Šeit vispirms importējiet Formik, Veidlapa, un Lauks komponenti no Formik bibliotēkas. Pēc tam izveidojiet komponentu ar nosaukumu MyForm. Šis komponents atveido veidlapu, kurā ir divi lauki: vārds un e-pasts.
Iniciatīvas vērtības piedāvājums iestata veidlapas lauku sākotnējās vērtības. Šajā gadījumā gan vārda, gan e-pasta lauki ir tukšas virknes.
Validācijas piedāvājums iestata veidlapas lauku validācijas noteikumus. Šajā gadījumā vārda lauks ir obligāts, un e-pasta laukam ir jāatbilst regulārajai izteiksmei.
Rekvizīts onSubmit iestata funkciju, ko React izsauks, kad lietotājs iesniedz veidlapu. Šajā gadījumā funkcija ir brīdinājums, kas parādīs veidlapas lauku vērtības.
Rekvizīts isSubmitting nosaka, vai veidlapa pašlaik tiek iesniegta. Šajā gadījumā jūs to iestatāt uz false.
Visbeidzot, atveidojiet veidlapu, izmantojot Formik komponentu Form.
Ārējo bibliotēku izmantošanas priekšrocības vietnē Next.js
Ir vairākas priekšrocības, izmantojot ārēju bibliotēku, piemēram, Formik, lai pārbaudītu veidlapas vietnē Next.js. Viena no priekšrocībām ir tā, ka lietotājam ir daudz vieglāk parādīt kļūdu ziņojumus. Piemēram, ja obligātais lauks nav aizpildīts, Formik automātiski parādīs kļūdas ziņojumu, tostarp ieteikto labojumu.
Vēl viens ieguvums ir tas, ka Formik var apstrādāt sarežģītākus validācijas noteikumus. Piemēram, varat izmantot Formik, lai pārbaudītu, vai divi lauki ir vienādi (piemēram, paroles un paroles apstiprinājuma lauks).
Visbeidzot, Formik ļauj ērti iesniegt veidlapas datus serverī. Piemēram, varat izmantot Formik, lai iesniegtu veidlapas datus API.
Palieliniet lietotāju iesaisti, izmantojot veidlapas
Varat izmantot veidlapas, lai palielinātu lietotāju iesaisti. Sniedzot atsauksmes, kad lietotājs ievada nederīgus datus, jūs varat palīdzēt izvairīties no neapmierinātības un neskaidrības.
Izmantojot ārējās bibliotēkas, varat pievienot tādus līdzekļus kā automātiskā pabeigšana un nosacījuma laukus. Tie var palīdzēt padarīt jūsu veidlapas vēl lietotājam draudzīgākas. Pareizi lietojot, veidlapas var būt spēcīgs rīks, kas palīdzēs palielināt lietotāju iesaisti un apkopot nepieciešamos datus.
Papildus validācijai vietnei Next.js ir daudzas funkcijas, kuras varat izmantot, lai palielinātu lietotāju iesaisti.
