React Academy · leksjon

Valideringsregler og feilmeldinger

Bruk innebygde valideringsregler (required, minLength, pattern) og vis feilmeldinger.

Leksjon 2 av 413 trinn

Valideringsregler og feilmeldinger er en gratis leksjon i React Academy på CoddyKit. Dette er leksjon 2 av 4. Du kan lese hele leksjonen gratis nedenfor – og deretter øve praktisk i nettleseren med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i React Academy, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i React Academy inneholder totalt 4 leksjoner.

Velkommen

I denne leksjonen skal du legge til innebygde valideringsregler i React Hook Form-felt og vise brukervennlige feilmeldinger under hvert inndatafelt.

Innebygde valideringsregler

Send et rules-objekt som det andre argumentet til register(). Innebygde regler omfatter: `required`, `minLength`, `maxLength`, `min`, `max`, `pattern` og `validate`.

<input
  {...register('email', {
    required: 'Email is required',
    pattern: {
      value: /^[^@]+@[^@]+\.[^@]+$/,
      message: 'Invalid email address',
    },
  })}
/>

Obligatoriske felt

Sett `required` til en streng for å gjøre feltet obligatorisk. Strengen blir feilmeldingen. Hvis du setter den til `true`, brukes en generell melding.

register('name', { required: 'Name is required' })
// or
register('name', { required: true })

Lengdebegrensninger

Bruk `minLength` og `maxLength` sammen med et `{ value, message }`-objekt for å angi tegnbegrensninger og egendefinerte feilmeldinger.

register('username', {
  minLength: { value: 3, message: 'At least 3 characters' },
  maxLength: { value: 20, message: 'At most 20 characters' },
})

Mønstervalidering

Regelen `pattern` godtar en RegExp-verdi. Bruk den til å validere e-postformater, telefonnumre eller et hvilket som helst strengmønster.

register('phone', {
  pattern: {
    value: /^[0-9]{10,11}$/,
    message: 'Enter a valid phone number',
  },
})

Vise feil

Les `errors`-objektet fra formState. Hvert felt som ikke bestod valideringen, har en oppføring med en `message`-egenskap. Gjengi den betinget under inndatafeltet.

const { register, handleSubmit, formState: { errors } } = useForm();

<input {...register('email', { required: 'Required' })} />
{errors.email && <p className="error">{errors.email.message}</p>}

Egendefinert validering med validate

Regelen `validate` godtar en funksjon som returnerer `true` for gyldige verdier eller en feilstreng for ugyldige verdier. Bruk den til forretningslogikk som ikke kan uttrykkes med de innebygde reglene.

register('age', {
  validate: value =>
    parseInt(value) >= 18 || 'You must be at least 18',
})

Flere egendefinerte validatorer

Send et objekt med navngitte validatorer til `validate` for å kjøre flere egendefinerte kontroller på samme felt.

register('password', {
  validate: {
    hasUpper: v => /[A-Z]/.test(v) || 'Needs uppercase',
    hasDigit: v => /[0-9]/.test(v) || 'Needs a number',
  }
})

Vise antall feil

Tell det totale antallet feil for å aktivere eller deaktivere innsendingsknappen eller vise et sammendrag. Bruk Object.keys(errors).length.

const hasErrors = Object.keys(errors).length > 0;
<button type="submit" disabled={hasErrors}>Submit</button>

Stilisere inndatafelt med feil

Bruk en CSS-klasse på inndatafelt som har feil, for å vise en rød kantlinje. Kontroller errors[fieldName] for å bruke klassen betinget.

<input
  {...register('email', { required: true })}
  className={errors.email ? 'input-error' : ''}
/>

Hurtigsjekk

Hvordan viser du feilmeldingen for et felt med navnet 'email' i React Hook Form?

Besvar den i den interaktive leksjonen

Oppsummering

Legg til valideringsregler som det andre argumentet til register(): required, minLength, maxLength, pattern, min, max og validate. Les errors[fieldName].message fra formState for å vise meldinger.

Neste

Neste leksjon: **Skjemavalidering med Zod** — du vil integrere @hookform/resolvers og Zod-skjemaer for typesikker skjemavalidering.

Gratis å komme i gang

Lær deg React med en AI-veileder – gratis

Skriv og kjør ekte kode i nettleseren, få umiddelbar hjelp fra en AI-veileder som er tilgjengelig døgnet rundt, og fortsett der du slapp – på nettet eller i appen.

Kurs: 88
Leksjoner: 324

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Valideringsregler og feilmeldinger» gratis?

Ja – hele teksten i «Valideringsregler og feilmeldinger» er gratis å lese her på nettet. For å øve interaktivt med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt, og for å låse opp resten av React Academy-kurset, kan du oppgradere til CoddyKit PRO. Kurset i React Academy inneholder totalt 4 leksjoner.

Hva lærer jeg i «Valideringsregler og feilmeldinger»?

Bruk innebygde valideringsregler (required, minLength, pattern) og vis feilmeldinger. Du øver på React Academy med praktisk kode som du kjører direkte i nettleseren, mens en AI-veileder som er tilgjengelig døgnet rundt, svarer på spørsmålene dine mens du jobber deg gjennom leksjonen.

Trenger jeg erfaring for å begynne med React Academy?

Ingen tidligere erfaring er nødvendig. React Academy på CoddyKit er lagt opp for både nybegynnere og viderekomne, så De kan begynne her eller helt fra start og lære i Deres eget tempo. Dette er leksjon 2 av 4.

Hvor lang tid tar leksjonen «Valideringsregler og feilmeldinger»?

De fleste CoddyKit-leksjoner tar omtrent 5–10 minutter. Hver leksjon er kort og interaktiv, slik at De gjør jevne fremskritt og kan fortsette akkurat der De slapp – både på nettet og i appen.

Kan jeg skrive og kjøre kode i denne React Academy-leksjonen?

Ja. Alle React Academy-leksjoner har en innebygd kodeeditor, slik at De kan skrive og kjøre ekte kode direkte i nettleseren og få umiddelbar tilbakemelding fra AI – uten lokal konfigurering.

Alle leksjonene i dette kurset

← Tilbake til React Academy