Reacts experimental_useFormState valideringspipeline: Opbygning af robuste formularvalideringskæder

Formularvalidering er en grundsten i udviklingen af robuste og brugervenlige webapplikationer. Reacts experimental_useFormState hook tilbyder en kraftfuld og fleksibel tilgang til at håndtere formularens tilstand og implementere komplekse valideringspipelines. Dette blogindlæg dykker ned i, hvordan man kan udnytte experimental_useFormState til at skabe vedligeholdelsesvenlige, skalerbare og internationalt tilpasningsdygtige formularvalideringssystemer.

Forståelse af experimental_useFormState

experimental_useFormState er en eksperimentel React hook (på tidspunktet for skrivning; tjek altid den officielle React-dokumentation for den seneste status), der er designet til at forenkle formularhåndtering og -validering. Den håndterer opdateringer af formularens tilstand og giver dig mulighed for at definere reducer-funktioner til at styre mere komplekse tilstandsovergange. Dens primære fordel ligger i dens evne til at integrere problemfrit med asynkrone operationer og server-side validering.

Kernekoncepter

• State Management: experimental_useFormState håndterer hele formularens tilstand, hvilket reducerer boilerplate-kode relateret til opdatering af individuelle formularfelter.
• Reducer-funktioner: Den anvender reducer-funktioner til at håndtere tilstandsopdateringer, hvilket muliggør kompleks logik og sikrer forudsigelige tilstandsovergange. Dette ligner useReducer, men er skræddersyet til formularers tilstand.
• Asynkrone operationer: Den integrerer problemfrit med asynkrone operationer, hvilket gør det let at håndtere server-side validering og indsendelse.
• Valideringspipeline: Du kan oprette en kæde af valideringsfunktioner, der udføres sekventielt, hvilket giver en struktureret og organiseret tilgang til formularvalidering.

Oprettelse af en valideringspipeline

En valideringspipeline er en sekvens af funktioner, der udføres efter hinanden for at validere formulardata. Hver funktion udfører en specifik valideringskontrol, og pipelinen returnerer et samlet resultat, der angiver, om formularen er gyldig, samt eventuelle tilhørende fejlmeddelelser. Denne tilgang fremmer modularitet, genbrugelighed og vedligeholdelsesvenlighed.

Eksempel: En simpel registreringsformular

Lad os illustrere med en simpel registreringsformular, der kræver et brugernavn, en e-mail og en adgangskode.

1. Definition af formularens tilstand

Først definerer vi den indledende tilstand for vores formular:

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

            

              
                Copy
              
            
          

2. Implementering af Reducer-funktionen

Dernæst opretter vi en reducer-funktion til at håndtere tilstandsopdateringer:

            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. Definition af valideringsfunktioner

Nu definerer vi individuelle valideringsfunktioner for hvert felt:

            const validateUsername = (username) => {
  if (!username) {
    return 'Brugernavn er påkrævet.';
  } else if (username.length < 3) {
    return 'Brugernavn skal være mindst 3 tegn langt.';
  } else if (username.length > 20) {
    return 'Brugernavn må ikke være længere end 20 tegn.';
  }
  return null;
};

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

const validatePassword = (password) => {
  if (!password) {
    return 'Adgangskode er påkrævet.';
  } else if (password.length < 8) {
    return 'Adgangskoden skal være mindst 8 tegn lang.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Oprettelse af valideringspipelinen

Vi samler valideringsfunktionerne i 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. Integration 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) {
      // Indsend formularen
      console.log('Formular er gyldig, indsender...', state);
    } else {
      console.log('Formular er ugyldig, ret venligst fejlene.');
    }
  };

  return (
    

      

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

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

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

export default RegistrationForm;

            

              
                Copy
              
            
          

Avancerede valideringsteknikker

Betinget validering

Nogle gange skal du validere et felt baseret på værdien af et andet felt. For eksempel kan du kun kræve et telefonnummer, hvis brugeren vælger et bestemt land.

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

            

              
                Copy
              
            
          

Asynkron validering

Asynkron validering er afgørende, når du skal kontrollere gyldigheden af et felt mod en server-side database eller API. For eksempel vil du måske verificere, om et brugernavn allerede er taget.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Brugernavnet er allerede taget.';
    }
    return null;
  } catch (error) {
    console.error('Fejl ved tjek af brugernavns tilgængelighed:', error);
    return 'Fejl ved tjek af brugernavns tilgængelighed.';
  }
};

            

              
                Copy
              
            
          

Du bliver nødt til at integrere denne asynkrone validering i din reducer og håndtere den asynkrone natur korrekt ved hjælp af Promises eller async/await.

Brugerdefinerede valideringsregler

Du kan oprette brugerdefinerede valideringsregler for at håndtere specifik forretningslogik eller formateringskrav. For eksempel skal du måske validere et postnummer baseret på det valgte land.

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

            

              
                Copy
              
            
          

Overvejelser om internationalisering (i18n)

Når man bygger formularer til et globalt publikum, er internationalisering afgørende. Overvej følgende:

• Datoformater: Brug et bibliotek som date-fns eller moment.js til at håndtere forskellige datoformater baseret på brugerens lokalitet (locale).
• Talformater: Brug Intl.NumberFormat til at formatere tal i henhold til brugerens lokalitet.
• Valutaformater: Brug Intl.NumberFormat til at formatere valutaer korrekt, inklusive det passende valutasymbol og decimaladskiller.
• Adresseformater: Overvej at bruge et bibliotek som libaddressinput til at håndtere forskellige adresseformater baseret på brugerens land.
• Oversatte fejlmeddelelser: Gem fejlmeddelelser i en oversættelsesfil og brug et bibliotek som i18next til at vise dem på brugerens sprog.

Eksempel: Oversatte fejlmeddelelser

Her er, hvordan du kan bruge i18next til at oversætte fejlmeddelelser:

            // da.json
{
  "username_required": "Brugernavn er påkrævet.",
  "email_required": "E-mail er påkrævet.",
  "invalid_email": "E-mail er ikke gyldig."
}

// Komponent
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
              
            
          

Overvejelser om tilgængelighed

At sikre formularens tilgængelighed er afgørende for at skabe inkluderende webapplikationer. Følg disse retningslinjer:

• Brug semantisk HTML: Brug passende HTML-elementer som <label>, <input> og <button>.
• Giv klare etiketter (labels): Forbind etiketter med formularfelter ved at bruge for-attributten på <label>-elementet og id-attributten på <input>-elementet.
• Brug ARIA-attributter: Brug ARIA-attributter til at give yderligere information til hjælpemiddelteknologier, såsom skærmlæsere.
• Giv fejlmeddelelser: Vis klare og præcise fejlmeddelelser, der er lette at forstå. Brug ARIA-attributter som aria-describedby til at forbinde fejlmeddelelser med formularfelter.
• Sikre tastaturnavigation: Sørg for, at brugere kan navigere i formularen ved hjælp af tastaturet. Brug tabindex-attributten til at styre fokus-rækkefølgen.
• Brug tilstrækkelig kontrast: Sørg for tilstrækkelig kontrast mellem tekst- og baggrundsfarver for at gøre formularen læselig for brugere med synshandicap.

Bedste praksis

• Hold valideringsfunktioner modulære: Opret små, genbrugelige valideringsfunktioner, der udfører specifikke kontroller.
• Brug en konsekvent fejlhåndteringsstrategi: Implementer en konsekvent strategi for fejlhåndtering i hele din applikation.
• Giv brugervenlige fejlmeddelelser: Vis klare og præcise fejlmeddelelser, der hjælper brugerne med at forstå, hvad der gik galt, og hvordan de kan rette det.
• Test dine formularer grundigt: Test dine formularer med forskellige typer data og i forskellige browsere for at sikre, at de fungerer korrekt.
• Brug et formularbibliotek: Overvej at bruge et formularbibliotek som Formik eller React Hook Form for at forenkle formularhåndtering og -validering. Disse biblioteker tilbyder en bred vifte af funktioner, såsom håndtering af formularens tilstand, validering og indsendelse.
• Centraliser definitioner af fejlmeddelelser: Vedligehold et centralt lager for alle formularfejlmeddelelser for at fremme konsistens og vedligeholdelsesvenlighed. Dette forenkler også internationaliseringsprocessen.

Konklusion

Reacts experimental_useFormState hook, når den kombineres med en veldefineret valideringspipeline, giver en kraftfuld og fleksibel tilgang til at bygge robuste og vedligeholdelsesvenlige formularer. Ved at følge de bedste praksisser, der er skitseret i dette blogindlæg, kan du skabe formularer, der er brugervenlige, tilgængelige og internationalt tilpasningsdygtige. Husk altid at henvise til den officielle React-dokumentation for de seneste opdateringer om eksperimentelle funktioner.

At bygge effektiv formularvalidering er en kontinuerlig læringsproces. Eksperimenter med forskellige teknikker og tilpas dem til dine specifikke behov. Nøglen er at prioritere brugeroplevelsen og skabe formularer, der er både nemme at bruge og pålidelige.