React experimental_useFormState valideringspipeline: Bygging av robuste valideringskjeder for skjemaer

Skjemavalidering er en hjørnestein i byggingen av robuste og brukervennlige webapplikasjoner. Reacts experimental_useFormState-hook tilbyr en kraftig og fleksibel tilnærming til å håndtere skjematilstand og implementere komplekse valideringspipelines. Dette blogginnlegget dykker ned i hvordan man kan utnytte experimental_useFormState for å skape vedlikeholdbare, skalerbare og internasjonalt tilpasningsdyktige systemer for skjemavalidering.

Forståelse av experimental_useFormState

experimental_useFormState er en eksperimentell React-hook (i skrivende stund; sjekk alltid den offisielle React-dokumentasjonen for siste status) designet for å forenkle skjemahåndtering og validering. Den håndterer oppdateringer av skjematilstand og lar deg definere reducer-funksjoner for å håndtere mer komplekse tilstandsoverganger. Dens viktigste fordel ligger i evnen til å integreres sømløst med asynkrone operasjoner og server-side-validering.

Kjernekonsepter

• Tilstandshåndtering: experimental_useFormState håndterer hele skjematilstanden, noe som reduserer standardkode relatert til oppdatering av individuelle skjemafelt.
• Reducer-funksjoner: Den bruker reducer-funksjoner for å håndtere tilstandsoppdateringer, noe som muliggjør kompleks logikk og sikrer forutsigbare tilstandsoverganger. Dette ligner på useReducer, men er skreddersydd for skjematilstand.
• Asynkrone operasjoner: Den integreres sømløst med asynkrone operasjoner, noe som gjør det enkelt å håndtere server-side-validering og innsending.
• Valideringspipeline: Du kan lage en kjede av valideringsfunksjoner som utføres sekvensielt, noe som gir en strukturert og organisert tilnærming til skjemavalidering.

Opprette en valideringspipeline

En valideringspipeline er en sekvens av funksjoner som utføres etter hverandre for å validere skjemadata. Hver funksjon utfører en spesifikk valideringssjekk, og pipelinen returnerer et aggregert resultat som indikerer om skjemaet er gyldig og eventuelle tilhørende feilmeldinger. Denne tilnærmingen fremmer modularitet, gjenbrukbarhet og vedlikeholdbarhet.

Eksempel: Et enkelt registreringsskjema

La oss illustrere med et grunnleggende registreringsskjema som krever brukernavn, e-post og passord.

1. Definere skjemaets tilstand

Først definerer vi den initiale tilstanden til skjemaet vårt:

            const initialState = {
  username: '',
  email: '',
  password: '',
  errors: {},
  isValid: false,
};

            

              
                Copy
              
            
          

2. Implementere reducer-funksjonen

Deretter oppretter vi en reducer-funksjon for å håndtere tilstandsoppdateringer:

            function formReducer(state, action) {
  switch (action.type) {
    case 'UPDATE_FIELD':
      return {
        ...state,
        [action.field]: action.value,
      };
    case 'VALIDATE_FORM':
      return {
        ...state,
        errors: action.errors,
        isValid: action.isValid,
      };
    default:
      return state;
  }
}

            

              
                Copy
              
            
          

3. Definere valideringsfunksjoner

Nå definerer vi individuelle valideringsfunksjoner for hvert felt:

            const validateUsername = (username) => {
  if (!username) {
    return 'Brukernavn er påkrevd.';
  } else if (username.length < 3) {
    return 'Brukernavn må være minst 3 tegn langt.';
  } else if (username.length > 20) {
    return 'Brukernavn kan ikke være lengre enn 20 tegn.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'E-post er påkrevd.';
  } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
    return 'E-posten er ikke gyldig.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Passord er påkrevd.';
  } else if (password.length < 8) {
    return 'Passordet må være minst 8 tegn langt.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Opprette valideringspipelinen

Vi setter sammen valideringsfunksjonene til en pipeline:

            const validationPipeline = (state) => {
  const errors = {};
  errors.username = validateUsername(state.username);
  errors.email = validateEmail(state.email);
  errors.password = validatePassword(state.password);

  const isValid = Object.values(errors).every((error) => error === null);

  return { errors, isValid };
};

            

              
                Copy
              
            
          

5. Integrere med experimental_useFormState

            import React from 'react';
import { experimental_useFormState as useFormState } from 'react';

function RegistrationForm() {
  const [state, dispatch] = useFormState(formReducer, initialState);

  const handleChange = (e) => {
    dispatch({
      type: 'UPDATE_FIELD',
      field: e.target.name,
      value: e.target.value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    const { errors, isValid } = validationPipeline(state);

    dispatch({
      type: 'VALIDATE_FORM',
      errors,
      isValid,
    });

    if (isValid) {
      // Send inn skjemaet
      console.log('Skjemaet er gyldig, sender inn...', state);
    } else {
      console.log('Skjemaet er ugyldig, vennligst rett feilene.');
    }
  };

  return (
    

      

        Brukernavn:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        E-post:
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Passord:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Registrer
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Avanserte valideringsteknikker

Betinget validering

Noen ganger må du validere et felt basert på verdien til et annet felt. For eksempel kan det hende du bare krever et telefonnummer hvis brukeren velger et bestemt land.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'Telefonnummer er påkrevd for USA.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asynkron validering

Asynkron validering er avgjørende når du trenger å sjekke gyldigheten av et felt mot en server-side database eller API. For eksempel vil du kanskje verifisere om et brukernavn allerede er tatt.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Brukernavnet er allerede tatt.';
    }
    return null;
  } catch (error) {
    console.error('Feil ved sjekking av brukernavntilgjengelighet:', error);
    return 'Feil ved sjekking av brukernavntilgjengelighet.';
  }
};

            

              
                Copy
              
            
          

Du må integrere denne asynkrone valideringen i din reducer og håndtere den asynkrone naturen på riktig måte ved hjelp av Promises eller async/await.

Egendefinerte valideringsregler

Du kan lage egendefinerte valideringsregler for å håndtere spesifikk forretningslogikk eller formateringskrav. For eksempel kan det hende du må validere et postnummer basert på det valgte landet.

            const validatePostalCode = (postalCode, country) => {
  if (country === 'USA' && !/^[0-9]{5}(?:-[0-9]{4})?$/.test(postalCode)) {
    return 'Ugyldig postnummer for USA.';
  } else if (country === 'Canada' && !/^[A-Z]\d[A-Z] \d[A-Z]\d$/.test(postalCode)) {
    return 'Ugyldig postnummer for Canada.';
  }
  return null;
};

            

              
                Copy
              
            
          

Internasjonalisering (i18n) - hensyn

Når du bygger skjemaer for et globalt publikum, er internasjonalisering avgjørende. Vurder følgende:

• Datoformater: Bruk et bibliotek som date-fns eller moment.js for å håndtere forskjellige datoformater basert på brukerens locale.
• Tallformater: Bruk Intl.NumberFormat for å formatere tall i henhold til brukerens locale.
• Valutaformater: Bruk Intl.NumberFormat for å formatere valutaer korrekt, inkludert riktig valutasymbol og desimalskilletegn.
• Adresseformater: Vurder å bruke et bibliotek som libaddressinput for å håndtere forskjellige adresseformater basert på brukerens land.
• Oversatte feilmeldinger: Lagre feilmeldinger i en oversettelsesfil og bruk et bibliotek som i18next for å vise dem på brukerens språk.

Eksempel: Oversatte feilmeldinger

Slik kan du bruke i18next til å oversette feilmeldinger:

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// no.json
{
  "username_required": "Brukernavn er påkrevd.",
  "email_required": "E-post er påkrevd.",
  "invalid_email": "E-posten er ikke gyldig."
}

// Component
import { useTranslation } from 'react-i18next';

function MyComponent() {
  const { t } = useTranslation();

  const validateEmail = (email) => {
    if (!email) {
      return t('email_required');
    } else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
      return t('invalid_email');
    }
    return null;
  };
}

            

              
                Copy
              
            
          

Hensyn til tilgjengelighet

Å sikre tilgjengeligheten til skjemaer er avgjørende for å skape inkluderende webapplikasjoner. Følg disse retningslinjene:

• Bruk semantisk HTML: Bruk passende HTML-elementer som <label>, <input>, og <button>.
• Gi tydelige etiketter: Knytt etiketter til skjemafelt ved å bruke for-attributtet på <label>-elementet og id-attributtet på <input>-elementet.
• Bruk ARIA-attributter: Bruk ARIA-attributter for å gi tilleggsinformasjon til hjelpemidler, som skjermlesere.
• Gi feilmeldinger: Vis klare og konsise feilmeldinger som er enkle å forstå. Bruk ARIA-attributter som aria-describedby for å knytte feilmeldinger til skjemafelt.
• Sørg for tastaturnavigasjon: Sørg for at brukere kan navigere i skjemaet ved hjelp av tastaturet. Bruk tabindex-attributtet for å kontrollere fokusrekkefølgen.
• Bruk tilstrekkelig kontrast: Sørg for tilstrekkelig kontrast mellom tekst- og bakgrunnsfarger for å gjøre skjemaet lesbart for brukere med synshemninger.

Beste praksis

• Hold valideringsfunksjoner modulære: Lag små, gjenbrukbare valideringsfunksjoner som utfører spesifikke sjekker.
• Bruk en konsekvent strategi for feilhåndtering: Implementer en konsekvent strategi for feilhåndtering i hele applikasjonen.
• Gi brukervennlige feilmeldinger: Vis klare og konsise feilmeldinger som hjelper brukere med å forstå hva som gikk galt og hvordan de kan fikse det.
• Test skjemaene dine grundig: Test skjemaene dine med forskjellige typer data og forskjellige nettlesere for å sikre at de fungerer korrekt.
• Bruk et skjemabibliotek: Vurder å bruke et skjemabibliotek som Formik eller React Hook Form for å forenkle skjemahåndtering og validering. Disse bibliotekene tilbyr et bredt spekter av funksjoner, som tilstandshåndtering, validering og innsendingshåndtering.
• Sentraliser definisjoner av feilmeldinger: Oppretthold et sentralt lager for alle feilmeldinger i skjemaer for å fremme konsistens og vedlikeholdbarhet. Dette forenkler også internasjonaliseringsprosessen.

Konklusjon

Reacts experimental_useFormState-hook, kombinert med en veldefinert valideringspipeline, gir en kraftig og fleksibel tilnærming til å bygge robuste og vedlikeholdbare skjemaer. Ved å følge beste praksis som er skissert i dette blogginnlegget, kan du lage skjemaer som er brukervennlige, tilgjengelige og internasjonalt tilpasningsdyktige. Husk å alltid henvise til den offisielle React-dokumentasjonen for de siste oppdateringene om eksperimentelle funksjoner.

Å bygge effektiv skjemavalidering er en kontinuerlig læringsprosess. Eksperimenter med forskjellige teknikker og tilpass dem til dine spesifikke behov. Nøkkelen er å prioritere brukeropplevelsen og lage skjemaer som er både enkle å bruke og pålitelige.