Next.js 15 for fullstack-webapper · leksjon

Skjemavalidering med React Hook Form

Implementer effektiv skjemavalidering ved hjelp av det populære biblioteket React Hook Form.

Leksjon 2 av 411 trinn

Skjemavalidering med React Hook Form er en gratis leksjon i Next.js 15 for fullstack-webapper på CoddyKit. Dette er leksjon 2 av 4. Du kan lese valgfritt 3 leksjoner fra denne læringsstien gratis i sin helhet – deretter låser CoddyKit PRO opp alle leksjoner, samt praktisk øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Den er en del av læringsløpet i Next.js 15 for fullstack-webapper, og fremdriften din synkroniseres mellom nettet og CoddyKit-appen. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hvorfor React Hook Form?

Det kan bli komplisert å administrere skjemaer i React, særlig når validering er involvert. React Hook Form (RHF) er et populært bibliotek som er utviklet for å forenkle denne prosessen.

Ytelse: Minimerer unødvendige gjengivelser.
Utvikleropplevelse: Enkelt API som er lett å integrere.
Validering: Kraftige og fleksible regler.

Det hjelper deg med å bygge robuste skjemaer med mindre kode og bedre ytelse.

Kom i gang: useForm

Installer først React Hook Form med npm eller yarn. Importer og bruk deretter useForm-hooken i komponenten. Denne hooken initialiserer skjemaet og gir deg viktige metoder.

import React from 'react';
import { useForm } from 'react-hook-form';

function SimpleForm() {
  // useForm initializes the form and gives us tools
  const { register, handleSubmit } = useForm();

  // This function runs when the form is submitted
  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      {/* Inputs will go here */}
      <button type="submit">Submit</button>
    </form>
  );
}

Registrere inndatafelt

For å gjøre et inndatafelt til en del av RHF-skjemaet må du «registrere» det. Funksjonen register tar navnet på inndatafeltet og returnerer props som du sprer over inndataelementet.

import React from 'react';
import { useForm } from 'react-hook-form';

function RegisterInputForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name")} />
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email" {...register("email")} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Grunnleggende validering: obligatorisk

RHF lar deg enkelt legge til valideringsregler under registreringen. Alternativet required: true gjør et inndatafelt obligatorisk. Hvis feltet er tomt, blir ikke skjemaet sendt inn.

import React from 'react';
import { useForm } from 'react-hook-form';

function RequiredValidationForm() {
  const { register, handleSubmit } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="itemName">Item Name:</label>
      <input id="itemName" {...register("itemName", { required: true })} />
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Vise feilmeldinger

Når valideringen mislykkes, fyller RHF ut objektet formState.errors. Du kan bruke dette objektet til å vise nyttige feilmeldinger ved siden av inndatafeltene og veilede brukeren.

import React from 'react';
import { useForm } from 'react-hook-form';

function DisplayErrorsForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="name">Name:</label>
      <input id="name" {...register("name", { required: "Name is required!" })} />
      {errors.name && <p style={{color: 'red'}}>{errors.name.message}</p>}
      <br/>
      <label htmlFor="age">Age:</label>
      <input id="age" type="number" {...register("age", { min: 18 })} />
      {errors.age && <p style={{color: 'red'}}>Must be at least 18.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Regler for lengde og mønster

RHF tilbyr også minLength og maxLength for å begrense antall tegn. Med alternativet pattern kan du validere inndata mot et regulært uttrykk, noe som passer perfekt for bestemte formater som e-postadresser eller telefonnumre.

import React from 'react';
import { useForm } from 'react-hook-form';

function LengthPatternForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="username">Username:</label>
      <input id="username" {...register("username", { minLength: 3, maxLength: 10 })} />
      {errors.username && <p style={{color: 'red'}}>3-10 chars.</p>}
      <br/>
      <label htmlFor="email">Email:</label>
      <input id="email" type="email"
        {...register("email", {
          pattern: /^\S+@\S+$/i
        })}
      />
      {errors.email && <p style={{color: 'red'}}>Invalid email.</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Egendefinert valideringslogikk

Når de innebygde reglene ikke er tilstrekkelige, kan du opprette egendefinert valideringslogikk ved å bruke alternativet validate i register. Denne funksjonen skal returnere true for gyldige inndata eller en feilmelding som tekst ellers.

import React from 'react';
import { useForm } from 'react-hook-form';

function CustomValidationForm() {
  const { register, handleSubmit, formState: { errors } } = useForm();
  const onSubmit = (data) => console.log(data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="password">Password:</label>
      <input id="password" type="password"
        {...register("password", {
          validate: (value) =>
            value.length >= 8 || "Min 8 chars!"
        })}
      />
      {errors.password && <p style={{color: 'red'}}>{errors.password.message}</p>}
      <br/>
      <button type="submit">Submit</button>
    </form>
  );
}

Håndtere innsending av skjema

Funksjonen handleSubmit fra useForm omslutter din egen logikk for innsending. Den sørger for at onSubmit-funksjonen bare kalles hvis all skjemavalidering består. Den sender automatisk de validerte skjemadataene til funksjonen din.

import React from 'react';
import { useForm } from 'react-hook-form';

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

  // This function is called only if validation passes
  const onSubmit = (data) => {
    console.log("Form data:", data);
    alert("Form submitted successfully!");
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="task">Task Description:</label>
      <input id="task" {...register("task", { required: true })} />
      {errors.task && <p style={{color: 'red'}}>Task is required.</p>}
      <br/>
      <button type="submit">Add Task</button>
    </form>
  );
}

Tilbakestille skjemafelt

Etter en vellykket innsending, eller hvis du vil tømme skjemaet når som helst, er metoden reset fra useForm svært nyttig. Den kan tømme alle feltene eller angi bestemte standardverdier for dem.

import React from 'react';
import { useForm } from 'react-hook-form';

function ResetForm() {
  const { register, handleSubmit, reset } = useForm();

  const onSubmit = (data) => {
    console.log(data);
    alert("Data sent!");
    reset(); // Clears all form fields
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="feedback">Your Feedback:</label>
      <input id="feedback" {...register("feedback")} />
      <br/>
      <button type="submit">Send Feedback</button>
      <button type="button" onClick={() => reset()}>Clear Form</button>
    </form>
  );
}

Test kunnskapene dine om RHF

Hvilke av de følgende er gyldige måter å definere valideringsregler på når du registrerer et inndatafelt med React Hook Form?

Besvar den i den interaktive leksjonen

Oppsummering: RHF for validering

Du har lært hvordan React Hook Form forenkler skjemavalidering i Next.js-applikasjoner!

Det tilbyr hooken useForm for å administrere skjemaet.
Inndatafelt kobles til ved hjelp av metoden register.
Valideringsregler (som required, minLength, pattern og validate) sendes direkte til register.
Feil åpnes via formState.errors.
Funksjonen handleSubmit sørger for at dataene dine er gyldige før innsending.
Metoden reset gjør det enkelt å tømme skjemaer.

Deretter skal du utforske hvordan du kan kombinere dette med Server Actions for fullstack-administrasjon av skjemaer!

Gratis å komme i gang

Lær deg TypeScript 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: 12
Leksjoner: 48

Start læringen gratis Se hele kurset

Ofte stilte spørsmål

Er leksjonen «Skjemavalidering med React Hook Form» gratis?

Ja – du kan lese valgfritt 3 av leksjonene i læringsstien Next.js 15 for fullstack-webapper, inkludert «Skjemavalidering med React Hook Form», gratis i sin helhet her på nettet. Deretter låser CoddyKit PRO opp alle leksjoner, samt interaktiv øving med en innebygd kodeeditor og en AI-veileder som er tilgjengelig døgnet rundt. Kurset i Next.js 15 for fullstack-webapper inneholder totalt 4 leksjoner.

Hva lærer jeg i «Skjemavalidering med React Hook Form»?

Implementer effektiv skjemavalidering ved hjelp av det populære biblioteket React Hook Form. Du øver på Next.js 15 for fullstack-webapper 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 Next.js 15 for fullstack-webapper?

Ingen tidligere erfaring er nødvendig. Next.js 15 for fullstack-webapper 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 «Skjemavalidering med React Hook Form»?

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 Next.js 15 for fullstack-webapper-leksjonen?

Ja. Alle Next.js 15 for fullstack-webapper-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

Kontrollerte komponenter og tilstand
Skjemavalidering med React Hook Form
Fullstack-skjemaer med Server Actions
Filopplastinger og multipart-skjemahåndtering

← Tilbake til Next.js 15 for fullstack-webapper