Sådan laver du Yup e-mail-validering: Alt hvad du behøver at vide

3. april 2024
8

Har du nogensinde oplevet, at besøgende på din hjemmeside har udfyldt dine formularer med falske eller dårligt formaterede e-mails?

Yup e-mailbekræftelse - coverfoto

Validering af brugerinput er et grundlæggende trin i at skabe sikre, brugervenlige webapplikationer. Men hvordan tackler man denne opgave uden at skrive en masse brugerdefineret valideringskode til hvert formularfelt?

For eksempel kan du bruge Yup - et JavaScript-skemavalideringsbibliotek, der er designet til at forenkle og strømline processen med at validere formularer og brugerdata i webudviklingsprojekter.

Hvad er Yup egentlig, og hvordan kan det ændre dit valideringsarbejde? Lad os finde ud af det.

Hvad er Yup?

Yup er en slank, kraftfuld JavaScript-skemabygger til parsing og validering af værdier. Det fungerer som et Javascript-skemavalideringsbibliotek og gør det muligt for udviklere at definere et skema til validering af brugerinput, datafelter, telefonnumre og meget mere.

Kort sagt kan Yup-sproget skabe komplekse valideringsregler, så du kan gøre det til en go-to-løsning til at sikre dataintegritet i dine applikationer. Du kan også bruge det til at validere e-mails.

Og hvordan fungerer det?

Kernen i Yup er, at du kan definere valideringsobjekter (skemaer), der specificerer formen på dine data, de typer værdier, hvert felt kan indeholde, og eventuelle regler, som disse værdier skal følge.

Hvis du f.eks. håndterer en brugerregistreringsformular, kan dit Yup-skema specificere det:

  • e-mail-feltet skal være en gyldig e-mail-adresse
  • og adgangskodefeltet skal være en streng, der opfylder visse kompleksitetskrav

Men det er ikke en perfekt løsning til e-mailvalidering. I senere afsnit vil vi vise dig en anden, bedre værktøj til validering af e-mailsMen lad os først udforske Yups valideringsregler.

Forskellige valideringsregler i Yup

Yup indeholder et sæt valideringsregler, der dækker en bred vifte af datatyper og scenarier. For eksempel:

  • Grundlæggende e-mail-validering - såsom streng, tal og boolean
  • Avancerede valideringsteknikker - som regex-mønstre for strenge eller min/max-værdier for tal
  • Brugerdefineret valideringsfunktion - Udviklere er ikke begrænset til de indbyggede valideringer i biblioteket. Hvis din applikation har unikke datavalideringsbehov, giver Yup dig værktøjerne til at skrive brugerdefinerede valideringsfunktioner, der kan integreres i dine eksisterende valideringsskemaer.

Hvis du forstår disse regler og bruger dem effektivt, vil du styrke integriteten af dine data, forbedre den samlede brugeroplevelse og garantere, at de indsamlede data er gyldig, pålidelig og klar til behandling.

Yup-funktioner og brugsscenarier

Så hvad er det egentlig, Yup kan, og hvilke scenarier vil det fungere i?

  • Hjælp til validering af e-mail

Udviklere kan opsætte en regel til at validere e-mailadresser og se, om brugerne angiver et gyldigt e-mailformat, før de sender en formular. Dens valideringsregler og -metoder kan bruges til at forbedre datakvaliteten og brugeroplevelsen i webapplikationer.

  • Understøtter en række indbyggede valideringsmetoder

Yup giver dig mulighed for at identificere ikke bare almindelige datatyper og mønstre, såsom strenge og tal, men også komplekse objekter og arrays. Det kan udvides, så du kan skrive brugerdefinerede valideringsfunktioner, hvis din applikation kræver kontroller, der går ud over Yups indbyggede muligheder.

  • Send brugerdefinerede fejlmeddelelser

I stedet for at forvirre dine brugere med kryptiske standardfejlmeddelelser giver Yup dig mulighed for at definere klar, forståelig feedback, der kan hjælpe brugerne med at korrigere deres input mere effektivt. Denne funktion er især værdifuld, når du vil hjælpe brugerne med at indtaste korrekte data.

  • Reducere mængden af kode, du skal skrive og vedligeholde

I forbindelse med webudvikling kan brugen af Yup reducere mængden af kode, du skal skrive og vedligeholde til formularvalidering, betydeligt. Det integreres problemfrit med populære front-end frameworks som React, så det er et alsidigt valg for udviklere, der ønsker at implementere robuste valideringsløsninger i deres projekter.

Jep, validering er ikke nogen lille ting. Det kræver ganske vist en masse læring og teknologisk viden, men i sidste ende kan det eliminere fejl fra ugyldige e-mailindtastninger.

Hvordan validerer man en Yup-e-mail?

For at udføre e-mailvalidering med Yup, skal du bruge dens fleksible API. 

Denne proces involverer fire trin og tilbyder to hovedmetoder til e-mailvalidering: string.email-metoden til grundlæggende formatkontrol og string.matches-metoden til mere tilpasset kontrol. 

Lad os dykke ned i, hvordan disse metoder kan bruges gennem en testfunktion.

Opsætning Yup

Først skal du tilføje Yup til dit projekt. Det kan downloades ved hjælp af en pakke-downloader som npm. Download den med en simpel kommando:

npm install yup

Når du er færdig, kan du begynde at oprette valideringsskemaer. En grundlæggende opsætning af et valideringsskema kan se sådan ud:

import * as yup from 'yup';

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

email: yup.string().email('Ugyldigt email-format').required('Email er påkrævet'),

});

Opret et skema til validering af e-mail

Til grundlæggende validering af e-mailformater bruger du string.email-metoden, da den kontrollerer, om brugerinputtet overholder en generel e-mailstruktur:

const emailSchema = yup.object({

email: yup.string().email('Ugyldigt e-mail-format'),

});

Hvis du vil udforske en mere tilpasset tilgang, kan du bruge metoden string.matches sammen med et regulært udtryk og en tilpasset valideringsfunktion. Denne metode er især nyttig, hvis du har specifikke kriterier for, hvad der udgør en gyldig e-mail i din applikation:

const emailSchema = yup.object({

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

});

Integrer med formularer

Nu kan du integrere Yup-e-mailvalidering i formularer, for eksempel i frameworks som React. Du kan bruge Formik her - en pakke, der kan installeres i en React-applikation og er bygget specifikt til at arbejde med den. Nedenfor er et simpelt eksempel, der bruger Reacts tilstand til at håndtere formularens indsendelse og valideringsfeedback:

import React, { useState } from 'react';

import { useFormik } from 'formik';

import * as yup from 'yup';

const validationSchema = yup.object({

email: yup.string().email('Ugyldigt email-format').required('Email er påkrævet'),

});

const EmailForm = () => {

const formik = useFormik({

initialValues: { email: " },

validationSchema,

onSubmit: (values) => alert('Formular indsendt'),

});

returnere (

.

<input

type="email"

name="email"

onChange={formik.handleChange}

value={formik.values.email}

onBlur={formik.handleBlur}

/>

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

Submit.

</form

);

};

Ovenstående kode er kun en del af en større helhed. Hvis du vil gå mere i detaljer, skal du bruge den relevante dokumentation.

Håndter valideringsfeedback

Husk at bruge valideringsfeedback for at få en bedre brugeroplevelse. Forestil dig, at du udfylder en formular og laver en fejl; du vil gerne vide præcis, hvad der gik galt, og hvordan du retter det, ikke?

Det er her, Yup kommer ind i billedet med sine brugerdefinerede fejlmeddelelser. I stedet for at lade brugerne gætte, lader Yup dig stave præcist, hvad de skal gøre for at rette deres input.

Du kan vise disse brugerdefinerede fejlmeddelelser lige ved siden af de formularfelter, de relaterer til. På den måde får brugerne øjeblikkelig feedback, hvis de har indtastet noget forkert, f.eks. en e-mail i det forkerte format. De behøver ikke at vente, til de trykker "send" for at finde ud af, at der er noget galt, så hele processen vil føles mere som en samtale og mindre som en gætteleg.

Hvorfor Yup-e-mailvalidering ikke er et godt valg

Selvom Yup er en praktisk måde at implementere valideringsregler i applikationer på, er det måske ikke altid det ideelle valg til alle scenarier.

Den primære funktion i Yups e-mailvalidering er at kontrollere, om input matcher et grundlæggende e-mailformat. Det betyder, at det fanger måske ikke mere sofistikerede problemer med e-mailadresser, f.eks. dem med gyldige formater, men inaktive eller ikke-eksisterende domæner, spam-fælder, catch-all e-mails osv.

Det er også verificerer ikke leveringsdygtigheden af en e-mailadresse eller tjekke mod højrisiko- eller engangs-e-mailudbydere, hvilket trods alt er afgørende for virksomheder, der er afhængige af e-mailkommunikation til kundeengagement eller marketingformål.

Desuden kræver implementering af avancerede e-mailvalideringsfunktioner i Yup brugerdefinerede valideringsregler, som kan øger kompleksiteten og udviklingsomkostningerne.

For applikationer, hvor e-mailvalidering er afgørende for driften eller brugeroplevelsen, antyder disse begrænsninger, at et mere specialiseret værktøj kan være nødvendigt.

Det er grunden til at bruge Udsmider - et værktøj, der er bygget specifikt til e-mailvalidering, og som overgår mulighederne i generelle valideringsbiblioteker som Yup.

Det bedre alternativ til Yup e-mail-validering

Bouncer er ved at udvikle sig til et bedre alternativ til Yup til e-mailvalidering, og nu vil vi forklare hvorfor.
 

Bouncers hjemmeside

 
Bouncer tilbyder en række avancerede og grundlæggende værktøjer, der er skræddersyet specifikt til e-mailproblemer. Vores e-mail-kontrollør vil ikke kun verificere syntaksen i en e-mail, men også:

  • Kør DNS- og MX-posttjek
  • etablere en forbindelse med modtagerens SMTP-server
  • bruger vores proprietære algoritmer understøttet af AI til at forhandle med SMTP-serverne for at give dig de mest nøjagtige resultater muligt
  • test kvaliteten af din liste
  • markere alle e-mails, der indeholder inaktive eller ugyldige domæner
  • identificere e-mailadresser, der accepterer al indgående post
  • Tjek, at dine IP-adresser og domæner ikke er opført på nogen blokeringslister.
  • og meget mere

Bouncer har en imponerende verifikation nøjagtighed på 99,5% og kan reducere risikoen for falske positiver betydeligt.

➡️ Det høje præcisionsniveau er afgørende for at opretholde en ren e-mail-liste og øge den samlede leveringsevne - nøglefaktorer for vellykket e-mail-marketing og kommunikationsstrategier.

Udsmidere API til bekræftelse af e-mail er designet til hastighed. Den kan behandle op til 500.000 e-mails i en enkelt batch med hastighedsgrænser, der er indstillet til at rumme både batch- (200 anmodninger pr. minut) og realtids- (1.000 anmodninger pr. minut) verificeringsprocesser.

➡️ Høj hastighed sikrer, at virksomheder som din kan verificere store mængder e-mailadresser hurtigt og effektivt, hvilket er afgørende for operationer, der kræver hurtig databehandling.

Det, der adskiller Bouncer, er ikke kun dens tekniske evner, men også dens forpligtelse til brugersupport. Med adgang til førsteklasses kundeassistance via forskellige kanaler, herunder e-mail, kontaktformularer og videoopkald, får brugerne den hjælp, de har brug for til at navigere i eventuelle udfordringer eller integrationsproblemer.

➡️ Et sådant supportniveau bidrager til en smidig og effektiv brugeroplevelse, uanset kompleksiteten af de valideringsopgaver, der skal udføres.

Desuden tilbyder Bouncer konkurrencedygtige prismuligheder der henvender sig til virksomheder i alle størrelser. Deres pay-as-you-go-model og månedlige abonnementer giver sammen med mængderabatter mulighed for fleksibel skalering af verifikationsindsatsen i forhold til specifikke behov.

➡️ Bouncer er et prisbilligt værktøj, der tilbyder robust funktionalitet og gør det til et attraktivt valg for virksomheder, der ønsker at optimere deres e-mailvalideringsprocesser uden at sprænge banken.

Den høje brugertilfredshed bekræfter yderligere Bouncers effektivitet som e-mailbekræftelsestjeneste.
 

Udsmiderens anmeldelse

 
At vælge Bouncer betyder, at du i stedet for at skrive kodelinjer får et værktøj, der tager sig af din e-mailmarketingkampagne og evaluerer korrektheden af de data, som brugerne indtaster, med høj effektivitet.

Fra nu af behøver du ikke at outsource arbejdet til en anden eller tænke på at ansætte udviklere, fordi du har specialdesignet software lige ved hånden.
 

Bouncer CTA

Valider e-mails hurtigt og præcist

Yup kan håndtere skemavalidering med sin effektive tilgang. 

Uanset om du validerer simple formularfelter eller komplekse indlejrede objekter, kan Yup sikre, at dine data er korrekte og brugbare. Ved at indarbejde dette sprog i din udviklingsstack kan du strømline valideringsprocesser, forbedre dataintegriteten og skabe bedre oplevelser.

Men hvad nu, hvis du ikke har teknologiske færdigheder eller et team af udviklere, men bare vil have et enkelt, men kraftfuldt værktøj, der tager sig af validering af e-mailadresser og forbedrer dine e-mailmarketingkampagner?

Så er det bedre, hvis du vælger Bouncer.

Lær Bouncer at kende og se, at den kan meget mere end Yup. Tilmeld dig i dag, og valider dine første 100 e-mails for gratis!

Linje og prikker