React experimental_useFormState valideringspipeline: Bygga robusta valideringskedjor för formulär

Formulärvalidering är en hörnsten i att bygga robusta och användarvänliga webbapplikationer. Reacts experimental_useFormState hook erbjuder ett kraftfullt och flexibelt sätt att hantera formulärtillstånd och implementera komplexa valideringspipelines. Detta blogginlägg utforskar hur man kan utnyttja experimental_useFormState för att skapa underhållbara, skalbara och internationellt anpassningsbara valideringssystem för formulär.

Förstå experimental_useFormState

experimental_useFormState är en experimentell React-hook (när detta skrivs; kontrollera alltid den officiella React-dokumentationen för den senaste statusen) som är utformad för att förenkla formulärhantering och validering. Den hanterar uppdateringar av formulärtillstånd och låter dig definiera reducer-funktioner för att hantera mer komplexa tillståndsövergångar. Dess främsta fördel ligger i dess förmåga att sömlöst integreras med asynkrona operationer och validering på serversidan.

Kärnkoncept

• Tillståndshantering: experimental_useFormState hanterar hela formulärets tillstånd, vilket minskar mängden standardkod relaterad till uppdatering av enskilda formulärfält.
• Reducer-funktioner: Den använder reducer-funktioner för att hantera tillståndsuppdateringar, vilket möjliggör komplex logik och säkerställer förutsägbara tillståndsövergångar. Detta liknar useReducer, men är skräddarsytt för formulärtillstånd.
• Asynkrona operationer: Den integreras sömlöst med asynkrona operationer, vilket gör det enkelt att hantera validering och inskickning på serversidan.
• Valideringspipeline: Du kan skapa en kedja av valideringsfunktioner som exekveras sekventiellt, vilket ger ett strukturerat och organiserat tillvägagångssätt för formulärvalidering.

Skapa en valideringspipeline

En valideringspipeline är en sekvens av funktioner som exekveras efter varandra för att validera formulärdata. Varje funktion utför en specifik valideringskontroll, och pipelinen returnerar ett sammanställt resultat som indikerar om formuläret är giltigt samt eventuella associerade felmeddelanden. Detta tillvägagångssätt främjar modularitet, återanvändbarhet och underhållbarhet.

Exempel: Ett enkelt registreringsformulär

Låt oss illustrera med ett grundläggande registreringsformulär som kräver användarnamn, e-post och lösenord.

1. Definiera formulärets tillstånd

Först definierar vi det initiala tillståndet för vårt formulär:

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

            

              
                Copy
              
            
          

2. Implementera reducer-funktionen

Därefter skapar vi en reducer-funktion för att hantera tillståndsuppdateringar:

            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. Definiera valideringsfunktioner

Nu definierar vi individuella valideringsfunktioner för varje fält:

            const validateUsername = (username) => {
  if (!username) {
    return 'Användarnamn krävs.';
  } else if (username.length < 3) {
    return 'Användarnamnet måste vara minst 3 tecken långt.';
  } else if (username.length > 20) {
    return 'Användarnamnet får inte vara längre än 20 tecken.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'E-post krävs.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'E-postadressen är ogiltig.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Lösenord krävs.';
  } else if (password.length < 8) {
    return 'Lösenordet måste vara minst 8 tecken långt.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Skapa valideringspipelinen

Vi sätter samman valideringsfunktionerna till 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. Integrera 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) {
      // Skicka formuläret
      console.log('Formuläret är giltigt, skickar...', state);
    } else {
      console.log('Formuläret är ogiltigt, vänligen korrigera felen.');
    }
  };

  return (
    

      

        Användarnamn:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

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

        Lösenord:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Registrera
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Avancerade valideringstekniker

Villkorlig validering

Ibland behöver du validera ett fält baserat på värdet i ett annat fält. Till exempel kanske du bara kräver ett telefonnummer om användaren väljer ett specifikt land.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'Telefonnummer krävs för USA.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asynkron validering

Asynkron validering är avgörande när du behöver kontrollera giltigheten av ett fält mot en databas eller ett API på serversidan. Till exempel kanske du vill verifiera om ett användarnamn redan är upptaget.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Användarnamnet är redan upptaget.';
    }
    return null;
  } catch (error) {
    console.error('Fel vid kontroll av användarnamnets tillgänglighet:', error);
    return 'Fel vid kontroll av användarnamnets tillgänglighet.';
  }
};

            

              
                Copy
              
            
          

Du måste integrera denna asynkrona validering i din reducer och hantera den asynkrona naturen korrekt med hjälp av Promises eller async/await.

Anpassade valideringsregler

Du kan skapa anpassade valideringsregler för att hantera specifik affärslogik eller formateringskrav. Till exempel kan du behöva validera ett postnummer baserat på det valda landet.

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

            

              
                Copy
              
            
          

Hänsyn till internationalisering (i18n)

När man bygger formulär för en global publik är internationalisering avgörande. Tänk på följande:

• Datumformat: Använd ett bibliotek som date-fns eller moment.js för att hantera olika datumformat baserat på användarens locale.
• Talformat: Använd Intl.NumberFormat för att formatera tal enligt användarens locale.
• Valutaformat: Använd Intl.NumberFormat för att formatera valutor korrekt, inklusive rätt valutasymbol och decimalavskiljare.
• Adressformat: Överväg att använda ett bibliotek som libaddressinput för att hantera olika adressformat baserat på användarens land.
• Översatta felmeddelanden: Spara felmeddelanden i en översättningsfil och använd ett bibliotek som i18next för att visa dem på användarens språk.

Exempel: Översatta felmeddelanden

Så här kan du använda i18next för att översätta felmeddelanden:

            // sv.json
{
  "username_required": "Användarnamn krävs.",
  "email_required": "E-post krävs.",
  "invalid_email": "E-postadressen är ogiltig."
}

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

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

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

            

              
                Copy
              
            
          

Tillgänglighetsaspekter

Att säkerställa formulärs tillgänglighet är avgörande för att skapa inkluderande webbapplikationer. Följ dessa riktlinjer:

• Använd semantisk HTML: Använd lämpliga HTML-element som <label>, <input> och <button>.
• Tillhandahåll tydliga etiketter: Associera etiketter med formulärfält genom att använda for-attributet på <label>-elementet och id-attributet på <input>-elementet.
• Använd ARIA-attribut: Använd ARIA-attribut för att ge ytterligare information till hjälpmedelsteknik, såsom skärmläsare.
• Tillhandahåll felmeddelanden: Visa tydliga och koncisa felmeddelanden som är lätta att förstå. Använd ARIA-attribut som aria-describedby för att associera felmeddelanden med formulärfält.
• Säkerställ tangentbordsnavigering: Se till att användare kan navigera i formuläret med tangentbordet. Använd tabindex-attributet för att styra fokusordningen.
• Använd tillräcklig kontrast: Säkerställ tillräcklig kontrast mellan text- och bakgrundsfärger för att göra formuläret läsbart för användare med synnedsättning.

Bästa praxis

• Håll valideringsfunktioner modulära: Skapa små, återanvändbara valideringsfunktioner som utför specifika kontroller.
• Använd en konsekvent strategi för felhantering: Implementera en konsekvent strategi för felhantering i hela din applikation.
• Tillhandahåll användarvänliga felmeddelanden: Visa tydliga och koncisa felmeddelanden som hjälper användare att förstå vad som gick fel och hur de kan åtgärda det.
• Testa dina formulär noggrant: Testa dina formulär med olika typer av data och i olika webbläsare för att säkerställa att de fungerar korrekt.
• Använd ett formulärbibliotek: Överväg att använda ett formulärbibliotek som Formik eller React Hook Form för att förenkla formulärhantering och validering. Dessa bibliotek erbjuder ett brett utbud av funktioner, såsom tillståndshantering, validering och hantering av inskickning.
• Centralisera definitioner av felmeddelanden: Underhåll ett centralt arkiv för alla formulärs felmeddelanden för att underlätta konsekvens och underhållbarhet. Detta förenklar också internationaliseringsprocessen.

Slutsats

Reacts experimental_useFormState hook, i kombination med en väldefinierad valideringspipeline, erbjuder ett kraftfullt och flexibelt tillvägagångssätt för att bygga robusta och underhållbara formulär. Genom att följa bästa praxis som beskrivs i detta blogginlägg kan du skapa formulär som är användarvänliga, tillgängliga och internationellt anpassningsbara. Kom ihåg att alltid konsultera den officiella React-dokumentationen för de senaste uppdateringarna om experimentella funktioner.

Att bygga effektiv formulärvalidering är en kontinuerlig inlärningsprocess. Experimentera med olika tekniker och anpassa dem till dina specifika behov. Nyckeln är att prioritera användarupplevelsen och skapa formulär som är både enkla att använda och pålitliga.