18 Feb Ska du bry dig om Yup?
Det korta svaret är såklart ? “Yup”! ?
Men vad är Yup då?
Jo – det är en validator och objektbehandlare som är utmärkt att använda ihop med React.
Yup är avsedd att användas för front-end och förenklar validering av data på ett enkelt sätt.
För att en applikation skall vara stabil krävs att det datat som läses och behandlas följer det format som förväntas – annars riskerar applikationen att krasha. ??
Jaha, men hur funkar det då? ?
Med Yup skapas ett Yup-objekt som beskriver hur ett dataobjekt ska se ut — ett schema.
Yup kan sedan avgöra om data överenstämmer med schemat — Yup validerar helt enkelt datat mot hur vi förväntar oss att det skall se ut.
Validering av ett formulär är ett exempel, se struktur nedan.
OBS! Yup kan användas för mycket mer än bara validering av formulär — använd det med fördel för att validera alla typer av objekt! ?
{
email_address: email <required>
full_name: string, <required>
house_no: int,
address_1: string <required>,
address_2: string,
post_code: string <required>
timestamp: date <required>
}
Det här är en beskrivning av det objekt som förväntas från ett formulär. Om objektet som tas emot från formuläret inte överenstämmer med Yups schema så är inte objektet validerat. ✋
Notera att fältet email_address har datatypen email ! Yup kan med lätthet testa om ett värde är en epost-adress eller inte. på samma sätt kan Yup testa om fältet timestamp är ett datum eller inte. Så hur ser ett schema-objekt i Yup ut då??
const checkoutAddressSchema = yup.object().shape({
email_address: yup
.string()
.email()
.required(),
full_name: yup
.string()
.required(),
house_no: yup
.number()
.required()
.positive()
.integer(),
address_1: yup
.string()
.required(),
address_2: yup
.string(),
post_code: yup
.string()
.required(),
timestamp: yup
.date()
.default(() => (new Date()),
}),
});
Enkelt! ?
Ett Yup-schema är ett objekt som är till för att validera ett annat objekt. Koden är tillräckligt enkel att förstå utan kommentarer.
Varje validator har sin egen metod – detta gör att så många eller få valideringar som önskat kan utföras för varje datafält. Datatyper såsom string, integer, boolean, array, object och date har alla validator:er i Yup!
Men Yup kan validera mycket mer än bara enkla datatyper. I exemplet ovan används även validatorer som email, required, och positive – även notRequired finns! Det går även att ange standardvärden “default values” som i exemplet med fältet timestamp !
default() kan definieras som vilket värde som helst. Funktionen kan skrivas som vilken funktion som helst och innehålla specialkod för specifika fall.
...
timestamp: yup
.date()
.default(() => (new Date()),
}
...
Nu har vi ett schema – så hur validerar vi datat då? ?
Säg att vi får objektet nedan.
let addressFormData = {
email_address: 'ross@jkrbinvestments.com',
full_name: 'Ross Bulat',
house_no: null,
address_1: 'My Street Name',
post_code: 'AB01 0AB',
}
Fälten address_2 och timestamp saknas — men de är inte tvingande i vårt schema så objektet kommer fortfarande “matcha” schemat.
Hur ser vi om ett objekt är giltigt (valid)? ?
Jo – vi använder yup.isValid() I vårt exempel kommer det se ut såhär:
const valid = await checkoutAddressSchema.isValid(addressFormData);
isValid() returnerar ett promise – det innebär att vi kan använda async och await som i exemplet ovan, eller använda callback-kod enligt nedan:
checkoutAddressSchema
.isValid(addressFormData)
.then(function(valid) {
//valid - true or false
});
Ok, det var ju ganska enkelt. ?
I de flesta fall behöver vi även processa objektet för att säkerställa att det möter kraven från schemat. I vårt exempel förväntar vi oss ett “timestamp”-värde och sätter ett standardvärde (default) om det saknas. Validering av formuläret sker genom koden nedan.
await checkoutAddressSchema.validate(addressFormData);
Vårt objekt är nu validerat och klart att behandlas vidare av logiken i vår applikation! ✔️
En sak till som Yup hanterar är “casting” – omvandling av exempelvis ett nummer till en sträng.
I exemplet ovan kontrollerar vi med hjälp av validate() att datat är korrekt. Detta är behändigt och något du troligtvis kommer använda ofta.
Fast – vi skulle även kunna köra objektet genom metoden cast() som komtrollerar och korrigerar datatyperna.
I vårt formulär skulle house_no kunna vara en sträng, men schemat (och applikationen) förväntar sig en integer. cast() fixar detta åt oss! Den kan även konvertera en sträng som representerar ett “timestamp” till datum.
Cast används såhär:
checkoutAddressSchema.cast(addressFormData);
Här är några fler saker som är bra att kunna om Yup.
describe()
Datastruktur som den i början av den här artikeln kan hämtas från ett Yup-objekt med metoden describe().
concat()
Vill du kominera två schema till ett? Använd metoden concat().
abortEarly()
Sluta validera så snart Yup hittar ett fel i valideringen.
Som standard sammanställer Yup alla fel vilket innebär att valideringen tar längre tid.
await checkoutAddressSchema.validate(addressFormData, { abortEarly: false })
Yup har även bra stränghantering, såsom trim(), uppercase() och lowercase() liksom
hantering av nummer såsom min(), max(), round(), morethan(), lessthan(), och truncate().
Yup stöder även regex!
Installera Yup
npm i yup
yarn add yup
Importera Yup
import * as yup from 'yup';