Heeft u ooit geprobeerd een formulier in te dienen, waarna de webpagina u een foutmelding geeft dat een of meer velden ongeldig zijn? Zo ja, dan heb je formuliervalidatie ervaren.
Validatie is vaak essentieel om schone, bruikbare gegevens te verkrijgen. Van e-mailadressen tot datums, als het nauwkeurig moet zijn, moet u het zorgvuldig controleren.
Wat is formuliervalidatie?
Formuliervalidatie is het proces om ervoor te zorgen dat de gegevens die door een gebruiker in een formulier worden ingevoerd correct en volledig zijn. U kunt dit aan de clientzijde doen met behulp van ingebouwde HTML-functies zoals het vereiste kenmerk. Je kan ook valideren op de client met behulp van JavaScript, en er zijn externe Next.js-bibliotheken om het proces te vergemakkelijken.
Er zijn verschillende redenen waarom formuliervalidatie essentieel is. Ten eerste helpt het ervoor te zorgen dat de gegevens die in een formulier worden ingevoerd volledig en correct zijn. Dit is belangrijk omdat het fouten helpt voorkomen wanneer uw app gegevens naar een server of database verzendt.
Ten tweede kan formuliervalidatie helpen om de bruikbaarheid van een formulier te verbeteren door feedback te geven wanneer een gebruiker ongeldige gegevens invoert. Dit kan frustratie en verwarring bij de gebruiker helpen voorkomen.
Ten slotte kan formuliervalidatie helpen om de beveiliging van een formulier te verbeteren door ervoor te zorgen dat alleen geldige gegevens worden ingediend.
Formulieren valideren in Next.js
Er zijn twee manieren om formulieren in Next.js te valideren: met behulp van de ingebouwde methoden of met behulp van externe bibliotheken.
De ingebouwde methoden gebruiken
HTML biedt verschillende methoden om formulieren te valideren, waarvan de meest gebruikelijke de vereist attribuut. Dit zorgt ervoor dat een veld niet leeg kan zijn. U kunt deze methode gebruiken vanuit uw Next.js-app door simpelweg het kenmerk op te nemen in invoertags die u genereert. HTML biedt ook een patroon attribuut. U kunt dit samen met een reguliere expressie voor meer complexe validatie.
Dit voorbeeld bevat een formulier met twee velden: naam en e-mailadres. Het naamveld is vereist en het e-mailveld moet overeenkomen met een reguliere expressie.
importeren Reageer van 'Reageer'klasMijnFormulierstrekt zich uitReageer.Onderdeel{
veroorzaken() {
opbrengst (
<formulier >
<etiket>
Naam:
<invoertype="tekst" naam="naam" vereist />
</label>
<etiket>
E-mail:
<invoertype="e-mailen" naam="e-mailen"
patroon="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$" />
</label>
<invoertype="indienen" waarde="Indienen" />
</form>
)
}
}
exporterenstandaard MijnFormulier
Deze code importeert de React-bibliotheek, maakt vervolgens een klasse met de naam MyForm en geeft een formulierelement weer. Binnen het formulierelement bevinden zich twee labelelementen.
Het eerste labelelement bevat een verplicht tekstinvoerveld. Het tweede labelelement bevat een e-mailinvoerveld met een reguliere expressie in het patroonkenmerk.
Tot slot heb je een verzendknop. Wanneer een gebruiker het formulier indient, zorgt het vereiste kenmerk ervoor dat het naamveld is ingevuld. Het patroonkenmerk van het e-mailveld zorgt ervoor dat de e-mail de opgegeven indeling heeft. Als een van deze voorwaarden niet voldoet, wordt het formulier niet verzonden.
Er zijn een paar nadelen aan het gebruik van de ingebouwde methoden. Ten eerste kan het moeilijk zijn om alle verschillende validatieregels die u heeft ingesteld bij te houden. Ten tweede, als u veel velden heeft, kan het vervelend zijn om aan elk veld het vereiste kenmerk toe te voegen. Ten slotte bieden de ingebouwde methoden alleen basisvalidatie. Als u een complexere validatie wilt uitvoeren, moet u een externe bibliotheek gebruiken.
Een externe bibliotheek gebruiken
Naast de ingebouwde methoden zijn er ook veel externe bibliotheken die u kunt gebruiken om formulieren te valideren. Enkele populaire bibliotheken zijn Formik, react-hook-form en Yup.
Om een externe bibliotheek te gebruiken, moet u deze eerst installeren. Om bijvoorbeeld Formik te installeren, voert u de volgende opdracht uit:
npm installeren vormNadat u de bibliotheek hebt geïnstalleerd, kunt u deze in uw component importeren en gebruiken om uw formulier te valideren:
importeren Reageer van 'Reageer'
importeren { Formulier, formulier, veld } van 'formik'const MijnFormulier = () => (
<vorm
initialValues={{ naam: '', e-mail: '' }}
valideren={waarden => {
const fouten = {}
als (!waarden.naam) {
fouten.naam = 'Vereist'
}
als (!waarden.e-mail) {
errors.email = 'Vereist'
} andersals (
!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test (waarden.email)
) {
errors.email = 'Ongeldig e-mailadres'
}
opbrengst fouten
}}
onSubmit={(waarden, { setSubmitting }) => {
setTimeout(() => {
alarm (JSON.stringify (waarden, nul, 2))
setIndienen(vals)
}, 400)
}}
>
{({ isSubmitting }) => (
<Formulier>
<Veldtype="tekst" naam="naam" />
<Veldtype="e-mailen" naam="e-mailen" />
<knoptype="indienen" uitgeschakeld={isSubmitting}>
Indienen
</button>
</Form>
)}
</Formik>
)
exporterenstandaard MijnFormulier
Hier importeer je eerst de vorm, Formulier, En Veld componenten uit de Formik-bibliotheek. Maak vervolgens een component met de naam MyForm. Deze component geeft een formulier weer met twee velden: naam en e-mailadres.
De prop initialValues stelt de beginwaarden van de formuliervelden in. In dit geval zijn de naam- en e-mailvelden beide lege tekenreeksen.
De validatieprop stelt de validatieregels in voor de formuliervelden. In dit geval is het naamveld vereist en moet het e-mailveld overeenkomen met een reguliere expressie.
De onSubmit-prop stelt de functie in die React zal aanroepen wanneer de gebruiker het formulier indient. In dit geval is de functie een waarschuwing die de waarden van de formuliervelden weergeeft.
De isSubmitting-prop bepaalt of het formulier momenteel wordt verzonden. In dit geval stelt u deze in op false.
Geef ten slotte het formulier weer met behulp van de Form-component van Formik.
Voordelen van het gebruik van externe bibliotheken in Next.js
Het gebruik van een externe bibliotheek zoals Formik om formulieren in Next.js te valideren, heeft verschillende voordelen. Een voordeel is dat het veel gemakkelijker is om foutmeldingen aan de gebruiker weer te geven. Als een verplicht veld bijvoorbeeld niet is ingevuld, geeft Formik automatisch een foutmelding weer met een voorgestelde oplossing.
Een ander voordeel is dat Formik complexere validatieregels aankan. U kunt Formik bijvoorbeeld gebruiken om te valideren dat twee velden hetzelfde zijn (zoals een wachtwoord en wachtwoordbevestigingsveld).
Ten slotte maakt Formik het gemakkelijk om de formuliergegevens naar een server te verzenden. U kunt Formik bijvoorbeeld gebruiken om de formuliergegevens naar een API te verzenden.
Verhoog de betrokkenheid van gebruikers met behulp van formulieren
U kunt formulieren gebruiken om de betrokkenheid van gebruikers te vergroten. Door feedback te geven wanneer een gebruiker ongeldige gegevens invoert, kunt u frustratie en verwarring voorkomen.
Met behulp van externe bibliotheken kunt u functies toevoegen zoals automatische aanvulling en voorwaardelijke velden. Deze kunnen helpen om uw formulieren nog gebruiksvriendelijker te maken. Bij correct gebruik kunnen formulieren een krachtig hulpmiddel zijn om u te helpen de betrokkenheid van gebruikers te vergroten en de gegevens te verzamelen die u nodig hebt.
Naast validatie heeft Next.js veel functies die u kunt gebruiken om de betrokkenheid van gebruikers te vergroten.