Hvordan gjøre Yup e-postvalidering: Alt du trenger å vite

3. april 2024
8

Har du noen gang opplevd at besøkende har fylt ut skjemaer med falske eller dårlig formaterte e-poster?

Yup e-postbekreftelse - forsidebilde

Validering av brukerinndata er et grunnleggende trinn i arbeidet med å lage sikre og brukervennlige webapplikasjoner. Men hvordan skal man løse denne oppgaven uten å skrive massevis av tilpasset valideringskode for hvert enkelt skjemafelt?

Du kan for eksempel bruke Yup - et JavaScript-skjemavalideringsbibliotek som er utviklet for å forenkle og effektivisere prosessen med å validere skjemaer og brukerdata i webutviklingsprosjekter.

Hva er egentlig Yup, og hvordan kan det forandre valideringsarbeidet ditt? La oss finne ut av det.

Hva er Yup?

Yup er en slank og kraftig JavaScript-skjemabygger for parsing og validering av verdier. Det fungerer som et Javascript-skjemavalideringsbibliotek og gjør det mulig for utviklere å definere et skjema for å validere brukerinndata, datafelter, telefonnumre og mer.

Yup-språket kan lage komplekse valideringsregler, slik at du kan gjøre det til en god løsning for å sikre dataintegritet i applikasjonene dine. Du kan også bruke det til å validere e-post.

Og hvordan fungerer det?

Yup lar deg definere valideringsobjekter (skjemaer) som spesifiserer formen på dataene dine, hvilke typer verdier hvert felt kan inneholde, og hvilke regler disse verdiene må følge.

Hvis du for eksempel håndterer et brukerregistreringsskjema, kan Yup-skjemaet ditt spesifisere dette:

  • e-postfeltet må være en gyldig e-postadresse
  • og passordfeltet må være en streng som oppfyller visse krav til kompleksitet

Dette er imidlertid ikke en perfekt løsning for e-postvalidering. I senere avsnitt vil vi vise deg en annen og bedre verktøy for validering av e-postmen la oss først se nærmere på valideringsreglene for Yup.

Ulike valideringsregler i Yup

Yup tilbyr et sett med valideringsregler som dekker et bredt spekter av datatyper og scenarier. For eksempel

  • Grunnleggende e-postvalidering - som for eksempel streng, tall og boolsk
  • Avanserte valideringsteknikker - som regex-mønstre for strenger, eller min/maks-verdier for tall
  • Tilpasset valideringsfunksjon - utviklere er ikke begrenset til de innebygde valideringene som tilbys av biblioteket. Hvis applikasjonen din har unike behov for datavalidering, gir Yup deg verktøyene du trenger for å skrive egendefinerte valideringsfunksjoner som kan integreres i eksisterende valideringsskjemaer.

Hvis du forstår disse reglene og bruker dem effektivt, vil du styrke integriteten til dataene dine, forbedre den generelle brukeropplevelsen og garantere at dataene som samles inn er gyldig, pålitelig og klar for behandling.

Oppstartsfunksjoner og brukstilfeller

Så hva kan Yup egentlig gjøre, og hvilke scenarier vil det fungere i?

  • Hjelp til validering av e-post

Utviklere kan sette opp en regel for å validere e-postadresser og se om brukerne oppgir et gyldig e-postformat før de sender inn et skjema. Valideringsreglene og -metodene kan brukes til å forbedre datakvaliteten og brukeropplevelsen i webapplikasjoner.

  • Støtte for en rekke innebygde valideringsmetoder

Med Yup kan du ikke bare identifisere vanlige datatyper og mønstre, for eksempel strenger og tall, men også komplekse objekter og matriser. Det kan utvides, slik at du kan skrive egendefinerte valideringsfunksjoner hvis applikasjonen din krever kontroller som går utover Yups innebygde funksjoner.

  • Send egendefinerte feilmeldinger

I stedet for å forvirre brukerne med kryptiske standardfeilmeldinger, lar Yup deg definere tydelige og forståelige tilbakemeldinger som kan hjelpe brukerne med å korrigere inndataene sine på en mer effektiv måte. Denne funksjonen er spesielt verdifull når du ønsker å hjelpe brukerne med å legge inn korrekte data.

  • Reduser mengden kode du trenger å skrive og vedlikeholde

Når det gjelder nettutvikling, kan Yup redusere mengden kode du trenger å skrive og vedlikeholde for skjemavalidering, betraktelig. Den integreres sømløst med populære frontend-rammeverk, som React, og er dermed et allsidig valg for utviklere som ønsker å implementere robuste valideringsløsninger i prosjektene sine.

Ja, validering er ingen liten sak. Det krever riktignok mye læring og teknologisk kunnskap, men etter hvert kan det eliminere feil fra ugyldige e-postoppføringer.

Hvordan gjør jeg Yup e-postvalidering?

For å utføre e-postvalidering ved hjelp av Yup, bruker du det fleksible API-et. 

Denne prosessen består av fire trinn og tilbyr to hovedmetoder for e-postvalidering: string.email-metoden for grunnleggende formatkontroller og string.matches-metoden for mer tilpasset kontroll. 

La oss se nærmere på hvordan disse metodene kan brukes gjennom en testfunksjon.

Sett opp Yup

Først må du legge til Yup i prosjektet ditt. Den kan lastes ned ved hjelp av en pakkenedlasting som npm. Last den ned med en enkel kommando:

npm install yup

Når du er ferdig, kan du begynne å opprette valideringsskjemaer. Et grunnleggende valideringsskjema kan se slik ut:

import * as yup from 'yup';

const schema = yup.object().shape({

email: yup.string().email('Ugyldig e-postformat').required('E-post er påkrevd'),

});

Opprett et valideringsskjema for e-post

For grunnleggende validering av e-postformatet bruker du metoden string.email, som kontrollerer om brukerens inndata følger en generell e-poststruktur:

const emailSchema = yup.object({

email: yup.string().email('Ugyldig e-postformat'),

});

Hvis du vil utforske en mer tilpasset tilnærming, kan du bruke metoden string.matches sammen med et regulært uttrykk og en egendefinert valideringsfunksjon. Denne metoden er spesielt nyttig hvis du har spesifikke kriterier for hva som utgjør en gyldig e-post i applikasjonen din:

const emailSchema = yup.object({

email: yup.string().matches(/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i, 'Ugyldig e-postformat'),

});

Integrer med skjemaer

Nå kan du integrere Yup-e-postvalidering i skjemaer, for eksempel i rammeverk som React. Her kan du bruke Formik - en pakke som kan installeres i en React-applikasjon, og som er laget spesielt for å fungere med den. Nedenfor ser du et enkelt eksempel som bruker Reacts tilstand til å håndtere innsending av skjema og valideringstilbakemelding:

import React, { useState } fra 'react';

import { useFormik } fra 'formik';

import * as yup from 'yup';

const validationSchema = yup.object({

email: yup.string().email('Ugyldig e-postformat').required('E-post er påkrevd'),

});

const EmailForm = () => {

const formik = useFormik({

initialValues: { e-post: " },

validationSchema,

onSubmit: (verdier) => alert('Skjemaet er sendt'),

});

returnere (

<input

type="e-post"

name="e-post"

onChange={formik.handleChange}

value={formik.values.email}

onBlur={formik.handleBlur}

/>

{formik.touched.email &amp;&amp; formik.errors.email ? <div>{formik.errors.email}</div> : null}

);

};

Koden ovenfor er bare en del av en større helhet. Hvis du vil gå mer i detalj, kan du bruke den aktuelle dokumentasjonen.

Håndtere valideringstilbakemeldinger

Husk å bruke valideringstilbakemeldinger for å få en bedre brukeropplevelse. Tenk deg at du fyller ut et skjema og gjør en feil; du vil vel gjerne vite nøyaktig hva som gikk galt og hvordan du kan fikse det?

Det er her Yup kommer inn i bildet med sine tilpassede feilmeldinger. I stedet for å la brukerne gjette, lar Yup deg stave nøyaktig hva de må gjøre for å korrigere inndataene sine.

Du kan vise disse egendefinerte feilmeldingene rett ved siden av skjemafeltene de er relatert til. På denne måten får brukerne umiddelbar tilbakemelding hvis de har skrevet inn noe feil, for eksempel en e-post i feil format. De trenger ikke å vente til de trykker på "send" for å finne ut at noe var galt, slik at hele prosessen vil føles mer som en samtale og mindre som en gjettelek.

Hvorfor Yup-validering av e-post ikke er et godt valg

Selv om Yup er en praktisk måte å implementere valideringsregler i applikasjoner på, er det ikke alltid det ideelle valget for alle scenarier.

Den primære funksjonen til Yups e-postvalidering er å kontrollere om inndataene samsvarer med et grunnleggende e-postformat. Dette betyr at Det er ikke sikkert at den fanger opp mer sofistikerte problemer med e-postadresser, for eksempel de med gyldige formater, men inaktive eller ikke-eksisterende domener, spamfeller, catch-all-e-poster osv.

Det er også ikke verifiserer leveringsdyktigheten til en e-postadresse eller sjekke mot høyrisiko- eller engangsleverandører av e-post, noe som tross alt er avgjørende for virksomheter som er avhengige av e-postkommunikasjon for kundeengasjement eller markedsføringsformål.

Videre krever implementering av avanserte e-postvalideringsfunksjoner i Yup tilpassede valideringsregler, noe som kan øker kompleksiteten og utviklingsomkostningene.

For applikasjoner der e-postvalidering er avgjørende for driften eller brukeropplevelsen, tyder disse begrensningene på at det kan være nødvendig med et mer spesialisert verktøy.

Det er grunnen til å bruke Utkaster - et verktøy som er utviklet spesielt for e-postvalidering, og som overgår mulighetene til generelle valideringsbiblioteker som Yup.

Det bedre alternativet til Yup-validering av e-post

Bouncer er i ferd med å bli et bedre alternativ enn Yup når det gjelder validering av e-post, og nå skal vi forklare hvorfor.
 

Bouncers hjemmeside

 
Bouncer tilbyr en rekke avanserte og grunnleggende verktøy som er skreddersydd spesielt for e-postproblemer. Vår e-postkontroll vil ikke bare verifisere syntaksen i en e-post, men også:

  • kjøre DNS- og MX-postsjekk
  • opprette en forbindelse med mottakerens server SMTP
  • bruker våre egenutviklede algoritmer støttet av kunstig intelligens til å forhandle med SMTP-serverne for å gi deg så nøyaktige resultater som mulig
  • test kvaliteten på listen din
  • merke alle e-poster som inneholder inaktive eller ugyldige domener
  • identifisere e-postadresser som godtar all innkommende e-post
  • sjekk at IP-adressene og domenene dine ikke er oppført på noen blokkeringslister
  • og mer

Bouncer har en imponerende verifisering nøyaktighet på 99,5% og kan redusere sjansene for falske positiver betydelig.

➡️ Det høye presisjonsnivået er avgjørende for å opprettholde en ren e-postliste og øke den generelle leveringsdyktigheten - nøkkelfaktorer for vellykket e-postmarkedsføring og kommunikasjonsstrategier.

Bouncer's API for e-postbekreftelse er utviklet for hastighet. Den kan behandle opptil 500 000 e-poster i én enkelt batch, med hastighetsgrenser som er satt for å imøtekomme både batch- (200 forespørsler per minutt) og sanntidsverifiseringsprosesser (1000 forespørsler per minutt).

➡️ Høy hastighet sikrer at bedrifter som din kan verifisere store mengder e-postadresser raskt og effektivt, noe som er avgjørende for virksomheter som krever rask databehandling.

Det som skiller Bouncer fra de andre, er ikke bare de tekniske egenskapene, men også forpliktelse til brukerstøtte. Med tilgang til førsteklasses kundeassistanse gjennom ulike kanaler, inkludert e-post, kontaktskjemaer og videosamtaler, får brukerne den hjelpen de trenger for å navigere i eventuelle utfordringer eller integrasjonsproblemer.

➡️ Et slikt støttenivå bidrar til en smidig og effektiv brukeropplevelse, uansett hvor komplekse valideringsoppgavene er.

Bouncer tilbyr dessuten konkurransedyktige prisalternativer som henvender seg til bedrifter i alle størrelser. Pay-as-you-go-modellen og månedlige abonnementer, sammen med volumrabatter, gir mulighet for fleksibel skalering av verifiseringsarbeidet i henhold til spesifikke behov.

➡️ Bouncer er et rimelig verktøy som tilbyr robust funksjonalitet og gjør det til et attraktivt valg for bedrifter som ønsker å optimalisere e-postvalideringsprosessene sine uten å ruinere banken.

Den høye brukertilfredsheten bekrefter Bouncers effektivitet som e-postbekreftelsestjeneste.
 

Bouncers anmeldelse

 
Ved å velge Bouncer får du et verktøy som tar seg av e-postmarkedsføringskampanjen din og evaluerer riktigheten av dataene som legges inn av brukerne på en effektiv måte, i stedet for å skrive kodelinjer.

Fra nå av trenger du ikke å sette bort arbeidet til noen andre eller tenke på å ansette utviklere, fordi du har spesialdesignet programvare til rådighet.
 

Bouncer CTA

Valider e-post raskt og nøyaktig

Yup kan håndtere skjemavalidering med sin effektive tilnærming. 

Uansett om du validerer enkle skjemafelt eller komplekse, nestede objekter, kan Yup sikre at dataene dine er korrekte og nyttige. Ved å innlemme dette språket i utviklingsstakken din kan du effektivisere valideringsprosesser, forbedre dataintegriteten og skape bedre opplevelser.

Men hva om du ikke har teknologikompetanse eller et team av utviklere, men bare vil ha et enkelt, men kraftig verktøy som tar seg av validering av e-postadresser og forbedrer e-postmarkedsføringskampanjene dine?

Da er det bedre om du velger Bouncer.

Bli kjent med Bouncer og se at den kan gjøre mye mer enn Yup. Registrer deg i dag og valider de første 100 e-postene dine for gratis!

Linje og prikker