React Academy · Lektion

Valideringsregler och felmeddelanden

Använd inbyggda valideringsregler (required, minLength, pattern) och visa felmeddelanden.

Lektion 2 av 413 steg

Valideringsregler och felmeddelanden är en gratis lektion i React Academy på CoddyKit. Detta är lektion 2 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för React Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Academy innehåller totalt 4 lektioner.

Välkommen

I den här lektionen kommer ni att lägga till inbyggda valideringsregler i React Hook Form-fält och visa användarvänliga felmeddelanden under varje inmatningsfält.

Inbyggda valideringsregler

Skicka ett regelobjekt som det andra argumentet till register(). Inbyggda regler omfattar: `required`, `minLength`, `maxLength`, `min`, `max`, `pattern` och `validate`.

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

Obligatoriska fält

Ange `required` som en sträng för att göra fältet obligatoriskt. Strängen blir felmeddelandet. Om ni anger `true` används ett generiskt meddelande.

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

Längdbegränsningar

Använd `minLength` och `maxLength` med ett `{ value, message }`-objekt för att ange teckenbegränsningar och anpassade felmeddelanden.

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

Mönstervalidering

Regeln `pattern` tar emot ett RegExp-värde. Använd den för att validera e-postformat, telefonnummer eller vilket strängmönster som helst.

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

Visa fel

Läs objektet `errors` från formState. Varje fält som inte klarade valideringen har en post med egenskapen `message`. Rendera den villkorligt under inmatningsfältet.

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

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

Anpassad validering med validate

Regeln `validate` tar emot en funktion som returnerar `true` för ett giltigt värde eller en felsträng för ett ogiltigt värde. Använd den för affärslogik som de inbyggda reglerna inte kan uttrycka.

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

Flera anpassade validerare

Skicka ett objekt med namngivna validerare till `validate` för att köra flera anpassade kontroller på samma fält.

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

Visa antal fel

Räkna det totala antalet fel för att aktivera eller inaktivera insändningsknappen eller visa en sammanfattning. Använd Object.keys(errors).length.

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

Formatera inmatningsfält med fel

Lägg till en CSS-klass på inmatningsfält som innehåller fel för att skapa en synlig röd kant. Kontrollera errors[fieldName] för att tillämpa klassen villkorligt.

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

Snabbkontroll

Hur visar ni felmeddelandet för ett fält med namnet 'email' i React Hook Form?

Besvara frågan i den interaktiva lektionen

Sammanfattning

Lägg till valideringsregler som det andra argumentet till register(): required, minLength, maxLength, pattern, min, max och validate. Läs errors[fieldName].message från formState för att visa meddelanden.

Nästa steg

Nästa lektion: **Schemapriserad validering med Zod** — ni kommer att integrera @hookform/resolvers och Zod-scheman för typsäker formulärvalidering.

Gratis att börja

Lär dig React med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser: 88
Lektioner: 324

Börja lära dig gratis Visa hela kursen

Vanliga frågor

Är lektionen ”Valideringsregler och felmeddelanden” gratis?

Ja – hela texten till ”Valideringsregler och felmeddelanden” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i React Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i React Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Valideringsregler och felmeddelanden”?

Använd inbyggda valideringsregler (required, minLength, pattern) och visa felmeddelanden. Ni övar på React Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig React Academy?

Du behöver inga förkunskaper. Utbildningen i React Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.

Hur lång tid tar lektionen ”Valideringsregler och felmeddelanden”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här React Academy-lektionen?

Ja. Varje React Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

← Tillbaka till React Academy