React useFormState Validacijski cevovod: Obvladovanje večstopenjske validacije obrazcev

Izdelava kompleksnih obrazcev z zanesljivo validacijo je pogost izziv v sodobnem spletnem razvoju. Reactov hook useFormState ponuja močan in prilagodljiv način za upravljanje stanja obrazca in validacije, kar omogoča ustvarjanje sofisticiranih večstopenjskih validacijskih cevovodov. Ta celovit vodnik vas bo popeljal skozi celoten postopek, od razumevanja osnov do implementacije naprednih strategij asinhrono validacijo.

Zakaj večstopenjska validacija obrazcev?

Tradicionalna, enostopenjska validacija obrazcev lahko postane okorna in neučinkovita, še posebej pri obrazcih z velikim številom polj ali kompleksnimi odvisnostmi. Večstopenjska validacija vam omogoča:

• Izboljšanje uporabniške izkušnje: Zagotovite takojšnjo povratno informacijo o posameznih delih obrazca, kar uporabnike učinkoviteje vodi skozi postopek izpolnjevanja.
• Povečanje zmogljivosti: Izognete se nepotrebnim preverjanjem veljavnosti celotnega obrazca, kar optimizira delovanje, še posebej pri velikih obrazcih.
• Povečanje vzdržljivosti kode: Razčlenite logiko validacije na manjše, obvladljive enote, kar olajša razumevanje, testiranje in vzdrževanje kode.

Razumevanje useFormState

Hook useFormState (pogosto na voljo v knjižnicah, kot je react-use, ali v lastnih implementacijah) omogoča upravljanje stanja obrazca, napak pri validaciji in obravnavo oddaje. Njegova osnovna funkcionalnost vključuje:

• Upravljanje stanja: Shranjuje trenutne vrednosti polj obrazca.
• Validacija: Izvaja pravila validacije glede na vrednosti obrazca.
• Sledenje napakam: Sledi napakam pri validaciji, povezanim z vsakim poljem.
• Obravnava oddaje: Zagotavlja mehanizme za oddajo obrazca in obravnavo rezultata oddaje.

Izgradnja osnovnega validacijskega cevovoda

Začnimo s preprostim primerom dvostopenjskega obrazca: osebni podatki (ime, e-pošta) in podatki o naslovu (ulica, mesto, država).

Korak 1: Definirajte stanje obrazca

Najprej definiramo začetno stanje našega obrazca, ki zajema vsa polja:

const initialFormState = {
  firstName: '',
  lastName: '',
  email: '',
  street: '',
  city: '',
  country: '',
};

Korak 2: Ustvarite pravila validacije

Nato definiramo naša pravila validacije. Za ta primer zahtevajmo, da vsa polja niso prazna in da je e-pošta v veljavnem formatu.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'To polje je obvezno.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Neveljaven format e-pošte.';
  }

  return null; // Brez napake
};

Korak 3: Implementirajte hook useFormState

Sedaj integrirajmo pravila validacije v našo React komponento z uporabo (hipotetičnega) hooka useFormState:

import React, { useState } from 'react';

// Predpostavljamo lastno implementacijo ali knjižnico, kot je react-use
const useFormState = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });

    // Validacija ob spremembi za boljšo UX (opcijsko)
    setErrors({ ...errors, [name]: validateField(name, value) });
  };

  const validateFormStage = (fields) => {
    const newErrors = {};
    let isValid = true;
    fields.forEach(field => {
      const error = validateField(field, values[field]);
      if (error) {
        newErrors[field] = error;
        isValid = false;
      }
    });
    setErrors({...errors, ...newErrors}); // Združi z obstoječimi napakami
    return isValid;
  };

  const clearErrors = (fields) => {
    const newErrors = {...errors};
    fields.forEach(field => delete newErrors[field]);
    setErrors(newErrors);
  };

  return {
    values,
    errors,
    handleChange,
    validateFormStage,
    clearErrors,
  };
};


const MyForm = () => {
  const { values, errors, handleChange, validateFormStage, clearErrors } = useFormState(initialFormState);
  const [currentStage, setCurrentStage] = useState(1);

  const handleNextStage = () => {
    let isValid;
    if (currentStage === 1) {
        isValid = validateFormStage(['firstName', 'lastName', 'email']);
    } else {
        isValid = validateFormStage(['street', 'city', 'country']);
    }

    if (isValid) {
      setCurrentStage(currentStage + 1);
    }
  };

  const handlePreviousStage = () => {
    if(currentStage > 1){
      if(currentStage === 2){
        clearErrors(['firstName', 'lastName', 'email']);
      } else {
        clearErrors(['street', 'city', 'country']);
      }
      setCurrentStage(currentStage - 1);
    }
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    const isValid = validateFormStage(['firstName', 'lastName', 'email', 'street', 'city', 'country']);
    if (isValid) {
      // Oddaj obrazec
      console.log('Obrazec oddan:', values);
      alert('Obrazec oddan!'); // Zamenjajte z dejansko logiko oddaje
    } else {
      console.log('Obrazec vsebuje napake, prosimo, popravite jih.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Osebni podatki
          
            Ime:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Priimek:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-pošta:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Podatki o naslovu
          
            Ulica:
            
            {errors.street && {errors.street}}
          
          

          
            Mesto:
            
            {errors.city && {errors.city}}
          
          

          
            Država:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Nazaj}
        {currentStage < 2 && Naprej}
        {currentStage === 2 && Oddaj}
      
    
  );
};

export default MyForm;

Korak 4: Implementirajte navigacijo med stopnjami

Uporabite spremenljivke stanja za upravljanje trenutne stopnje obrazca in prikažite ustrezen del obrazca glede na trenutno stopnjo.

Napredne tehnike validacije

Asinhrona validacija

Včasih validacija zahteva interakcijo s strežnikom, na primer preverjanje, ali je uporabniško ime na voljo. To zahteva asinhrono validacijo. Tukaj je, kako jo integrirati:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Uporabniško ime je na voljo
    } else {
      return 'Uporabniško ime je že zasedeno.';
    }
  } catch (error) {
    console.error('Napaka pri preverjanju uporabniškega imena:', error);
    return 'Napaka pri preverjanju uporabniškega imena. Prosimo, poskusite znova.'; // Elegantno obravnavajte omrežne napake
  }
};

const useFormStateAsync = (initialState) => {
  const [values, setValues] = useState(initialState);
  const [errors, setErrors] = useState({});
  const [isSubmitting, setIsSubmitting] = useState(false);

  const handleChange = (event) => {
    const { name, value } = event.target;
    setValues({ ...values, [name]: value });
  };

  const validateFieldAsync = async (fieldName, value) => {
    if (fieldName === 'username') {
      return await validateUsername(value);
    }
    return validateField(fieldName, value);
  };


  const handleSubmit = async (event) => {
      event.preventDefault();
      setIsSubmitting(true);
      let newErrors = {};
      let isValid = true;

      for(const key in values){
        const error = await validateFieldAsync(key, values[key]);
        if(error){
          newErrors[key] = error;
          isValid = false;
        }
      }

      setErrors(newErrors);
      setIsSubmitting(false);

      if (isValid) {
        // Oddaj obrazec
        console.log('Obrazec oddan:', values);
        alert('Obrazec oddan!'); // Zamenjajte z dejansko logiko oddaje
      } else {
        console.log('Obrazec vsebuje napake, prosimo, popravite jih.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Opcijsko: prikaži sporočilo o nalaganju med validacijo
  };
};

Ta primer vključuje funkcijo validateUsername, ki izvede klic API-ja za preverjanje razpoložljivosti uporabniškega imena. Poskrbite, da boste obravnavali morebitne omrežne napake in uporabniku zagotovili ustrezno povratno informacijo.

Pogojna validacija

Nekatera polja morda zahtevajo validacijo le na podlagi vrednosti drugih polj. Na primer, polje 'Spletna stran podjetja' je lahko obvezno le, če uporabnik navede, da je zaposlen. Implementirajte pogojno validacijo znotraj svojih validacijskih funkcij:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Spletna stran podjetja je obvezna, če ste zaposleni.';
  }
  return validateField(fieldName, value); // Delegiraj na osnovno validacijo
};

Dinamična pravila validacije

Včasih morajo biti sama pravila validacije dinamična, odvisna od zunanjih dejavnikov ali podatkov. To lahko dosežete tako, da dinamična pravila validacije posredujete kot argumente svojim validacijskim funkcijam:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `To polje mora vsebovati manj kot ${rules[fieldName].maxLength} znakov.`;
  }
  return validateField(fieldName, value); // Delegiraj na osnovno validacijo
};

Obravnavanje napak in uporabniška izkušnja

Učinkovito obravnavanje napak je ključnega pomena za pozitivno uporabniško izkušnjo. Upoštevajte naslednje:

• Jasno prikažite napake: Sporočila o napakah postavite blizu ustreznih vnosnih polj. Uporabite jasen in jedrnat jezik.
• Validacija v realnem času: Validacijo polj izvajajte med tipkanjem uporabnika, kar zagotavlja takojšnjo povratno informacijo. Bodite pozorni na posledice za delovanje; po potrebi uporabite tehnike 'debounce' ali 'throttle' za klice validacije.
• Osredotočite se na napake: Po oddaji usmerite pozornost uporabnika na prvo polje z napako.
• Dostopnost: Zagotovite, da so sporočila o napakah dostopna uporabnikom s posebnimi potrebami z uporabo atributov ARIA in semantičnega HTML-ja.
• Internacionalizacija (i18n): Implementirajte ustrezno internacionalizacijo za prikaz sporočil o napakah v uporabnikovem želenem jeziku. Pri tem vam lahko pomagajo storitve, kot sta i18next ali izvorni JavaScript Intl API.

Najboljše prakse za večstopenjsko validacijo obrazcev

• Ohranite jedrnata pravila validacije: Kompleksno logiko validacije razdelite na manjše, ponovno uporabne funkcije.
• Temeljito testirajte: Napišite enotske teste, da zagotovite točnost in zanesljivost svojih pravil validacije.
• Uporabite knjižnico za validacijo: Razmislite o uporabi namenske knjižnice za validacijo (npr. Yup, Zod), da poenostavite postopek in izboljšate kakovost kode. Te knjižnice pogosto ponujajo validacijo na podlagi shem, kar olajša definiranje in upravljanje kompleksnih pravil validacije.
• Optimizirajte delovanje: Izogibajte se nepotrebnim preverjanjem veljavnosti, še posebej med validacijo v realnem času. Uporabite tehnike memoizacije za predpomnjenje rezultatov validacije.
• Zagotovite jasna navodila: Uporabnike vodite skozi postopek izpolnjevanja obrazca z jasnimi navodili in koristnimi namigi.
• Razmislite o postopnem razkrivanju: Pokažite samo relevantna polja za vsako stopnjo, kar poenostavi obrazec in zmanjša kognitivno obremenitev.

Alternativne knjižnice in pristopi

Čeprav se ta vodnik osredotoča na lasten hook useFormState, obstaja več odličnih knjižnic za obrazce, ki ponujajo podobno funkcionalnost, pogosto z dodatnimi funkcijami in optimizacijami delovanja. Nekatere priljubljene alternative vključujejo:

• Formik: Široko uporabljena knjižnica za upravljanje stanja obrazcev in validacije v Reactu. Ponuja deklarativen pristop k obravnavi obrazcev in podpira različne strategije validacije.
• React Hook Form: Knjižnica, osredotočena na zmogljivost, ki uporablja nenadzorovane komponente in Reactov ref API za zmanjšanje ponovnih upodobitev. Zagotavlja odlično zmogljivost za velike in kompleksne obrazce.
• Final Form: Vsestranska knjižnica, ki podpira različna UI ogrodja in knjižnice za validacijo. Ponuja prilagodljiv in razširljiv API za prilagajanje obnašanja obrazca.

Izbira prave knjižnice je odvisna od vaših specifičnih zahtev in preferenc. Pri odločanju upoštevajte dejavnike, kot so zmogljivost, enostavnost uporabe in nabor funkcij.

Mednarodni vidiki

Pri izdelavi obrazcev za globalno občinstvo je ključnega pomena upoštevati internacionalizacijo in lokalizacijo. Tukaj je nekaj ključnih vidikov:

• Formati datuma in časa: Uporabljajte formate datuma in časa, specifične za posamezno lokacijo, da zagotovite doslednost in se izognete zmedi.
• Formati številk: Uporabljajte formate številk, specifične za lokacijo, vključno s simboli valut in decimalnimi ločili.
• Formati naslovov: Prilagodite polja za naslov različnim formatom držav. Nekatere države morda zahtevajo poštne številke pred mesti, medtem ko druge morda sploh nimajo poštnih številk.
• Validacija telefonskih številk: Uporabite knjižnico za validacijo telefonskih številk, ki podpira mednarodne formate telefonskih številk.
• Kodiranje znakov: Zagotovite, da vaš obrazec pravilno obravnava različne nabore znakov, vključno z Unicode in drugimi nelatiničnimi znaki.
• Postavitev od desne proti levi (RTL): Podprite jezike RTL, kot sta arabščina in hebrejščina, tako da ustrezno prilagodite postavitev obrazca.

Z upoštevanjem teh mednarodnih vidikov lahko ustvarite obrazce, ki so dostopni in uporabniku prijazni za globalno občinstvo.

Zaključek

Implementacija večstopenjskega validacijskega cevovoda z Reactovim hookom useFormState (ali alternativnimi knjižnicami) lahko znatno izboljša uporabniško izkušnjo, poveča zmogljivost in izboljša vzdržljivost kode. Z razumevanjem osnovnih konceptov in uporabo najboljših praks, opisanih v tem vodniku, lahko gradite robustne in razširljive obrazce, ki izpolnjujejo zahteve sodobnih spletnih aplikacij.

Ne pozabite dati prednosti uporabniški izkušnji, temeljito testirati in prilagoditi svoje strategije validacije specifičnim zahtevam vašega projekta. S skrbnim načrtovanjem in izvedbo lahko ustvarite obrazce, ki so hkrati funkcionalni in prijetni za uporabo.

Dodatno učenje

• Uradna dokumentacija za React
• Dokumentacija za Formik
• Dokumentacija za React Hook Form