React useFormState validācijas konveijers: daudzpakāpju formas validācijas apgūšana

Sarežģītu formu veidošana ar robustu validāciju ir izplatīts izaicinājums mūsdienu tīmekļa izstrādē. React useFormState āķis piedāvā jaudīgu un elastīgu veidu, kā pārvaldīt formas stāvokli un validāciju, ļaujot izveidot sarežģītus daudzpakāpju validācijas konveijerus. Šī visaptverošā rokasgrāmata jūs iepazīstinās ar šo procesu, sākot ar pamatu izpratni un beidzot ar progresīvu asinhrono validācijas stratēģiju ieviešanu.

Kāpēc daudzpakāpju formas validācija?

Tradicionālā, vienas pakāpes formas validācija var kļūt apgrūtinoša un neefektīva, īpaši, ja forma satur daudz lauku vai sarežģītas atkarības. Daudzpakāpju validācija ļauj jums:

• Uzlabot lietotāja pieredzi: Sniedziet tūlītēju atgriezenisko saiti par konkrētām formas sadaļām, efektīvāk vadot lietotājus aizpildīšanas procesā.
• Uzlabot veiktspēju: Izvairieties no nevajadzīgām visas formas validācijas pārbaudēm, optimizējot veiktspēju, īpaši lielām formām.
• Palielināt koda uzturamību: Sadaliet validācijas loģiku mazākās, pārvaldāmās vienībās, padarot kodu vieglāk saprotamu, testējamu un uzturamu.

Izpratne par useFormState

useFormState āķis (bieži pieejams bibliotēkās, piemēram, react-use, vai pielāgotās implementācijās) nodrošina veidu, kā pārvaldīt formas stāvokli, validācijas kļūdas un iesniegšanas apstrādi. Tā pamatfunkcionalitāte ietver:

• Stāvokļa pārvaldība: Saglabā pašreizējās formas lauku vērtības.
• Validācija: Izpilda validācijas noteikumus attiecībā uz formas vērtībām.
• Kļūdu izsekošana: Seko līdzi validācijas kļūdām, kas saistītas ar katru lauku.
• Iesniegšanas apstrāde: Nodrošina mehānismus formas iesniegšanai un iesniegšanas rezultāta apstrādei.

Pamata validācijas konveijera izveide

Sāksim ar vienkāršu piemēru divpakāpju formai: personīgā informācija (vārds, e-pasts) un adreses informācija (iela, pilsēta, valsts).

1. solis: Definējiet formas stāvokli

Vispirms mēs definējam mūsu formas sākotnējo stāvokli, kas ietver visus laukus:

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

2. solis: Izveidojiet validācijas noteikumus

Tālāk mēs definējam savus validācijas noteikumus. Šajā piemērā pieprasīsim, lai visi lauki būtu aizpildīti un e-pasta adrese būtu derīgā formātā.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Šis lauks ir obligāts.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Nederīgs e-pasta formāts.';
  }

  return null; // Nav kļūdas
};

3. solis: Ieviesiet useFormState āķi

Tagad integrēsim validācijas noteikumus mūsu React komponentē, izmantojot (hipotētisku) useFormState āķi:

import React, { useState } from 'react';

// Pieņemot pielāgotu implementāciju vai bibliotēku, piemēram, 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 });

    // Validēt pie izmaiņām labākai UX (pēc izvēles)
    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}); // Apvienot ar esošajām kļūdām
    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) {
      // Iesniegt formu
      console.log('Forma iesniegta:', values);
      alert('Forma iesniegta!'); // Aizstāt ar faktisko iesniegšanas loģiku
    } else {
      console.log('Formā ir kļūdas, lūdzu, izlabojiet tās.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Personīgā informācija
          
            Vārds:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Uzvārds:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            E-pasts:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Adreses informācija
          
            Iela:
            
            {errors.street && {errors.street}}
          
          

          
            Pilsēta:
            
            {errors.city && {errors.city}}
          
          

          
            Valsts:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Iepriekšējais}
        {currentStage < 2 && Nākamais}
        {currentStage === 2 && Iesniegt}
      
    
  );
};

export default MyForm;

4. solis: Ieviesiet pakāpju navigāciju

Izmantojiet stāvokļa mainīgos, lai pārvaldītu formas pašreizējo pakāpi un attēlotu atbilstošo formas sadaļu, pamatojoties uz pašreizējo pakāpi.

Progresīvas validācijas tehnikas

Asinhronā validācija

Dažreiz validācijai ir nepieciešama mijiedarbība ar serveri, piemēram, lai pārbaudītu, vai lietotājvārds ir pieejams. Tas prasa asinhronu validāciju. Lūk, kā to integrēt:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Lietotājvārds ir pieejams
    } else {
      return 'Lietotājvārds jau ir aizņemts.';
    }
  } catch (error) {
    console.error('Kļūda, pārbaudot lietotājvārdu:', error);
    return 'Kļūda, pārbaudot lietotājvārdu. Lūdzu, mēģiniet vēlreiz.'; // Apstrādājiet tīkla kļūdas eleganti
  }
};

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) {
        // Iesniegt formu
        console.log('Forma iesniegta:', values);
        alert('Forma iesniegta!'); // Aizstāt ar faktisko iesniegšanas loģiku
      } else {
        console.log('Formā ir kļūdas, lūdzu, izlabojiet tās.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting // Pēc izvēles: parādīt ielādes ziņojumu validācijas laikā
  };
};

Šis piemērs ietver validateUsername funkciju, kas veic API pieprasījumu, lai pārbaudītu lietotājvārda pieejamību. Pārliecinieties, ka apstrādājat iespējamās tīkla kļūdas un sniedzat lietotājam atbilstošu atgriezenisko saiti.

Nosacītā validācija

Dažiem laukiem validācija var būt nepieciešama tikai atkarībā no citu lauku vērtības. Piemēram, lauks "Uzņēmuma tīmekļa vietne" var būt obligāts tikai tad, ja lietotājs norāda, ka ir nodarbināts. Ieviesiet nosacīto validāciju savās validācijas funkcijās:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Uzņēmuma tīmekļa vietne ir obligāta, ja esat nodarbināts.';
  }
  return validateField(fieldName, value); // Deleģēt pamata validācijai
};

Dinamiskie validācijas noteikumi

Dažreiz pašiem validācijas noteikumiem ir jābūt dinamiskiem, atkarībā no ārējiem faktoriem vai datiem. To var panākt, nododot dinamiskos validācijas noteikumus kā argumentus jūsu validācijas funkcijām:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Šim laukam jābūt īsākam par ${rules[fieldName].maxLength} rakstzīmēm.`;
  }
  return validateField(fieldName, value); // Deleģēt pamata validācijai
};

Kļūdu apstrāde un lietotāja pieredze

Efektīva kļūdu apstrāde ir būtiska pozitīvai lietotāja pieredzei. Apsveriet sekojošo:

• Skaidri attēlojiet kļūdas: Novietojiet kļūdu ziņojumus blakus atbilstošajiem ievades laukiem. Izmantojiet skaidru un kodolīgu valodu.
• Reāllaika validācija: Validējiet laukus, kamēr lietotājs raksta, sniedzot tūlītēju atgriezenisko saiti. Pievērsiet uzmanību veiktspējas ietekmei; ja nepieciešams, izmantojiet "debounce" vai "throttle" validācijas izsaukumiem.
• Fokusējieties uz kļūdām: Pēc iesniegšanas, novirziet lietotāja uzmanību uz pirmo lauku ar kļūdu.
• Pieejamība: Nodrošiniet, lai kļūdu ziņojumi būtu pieejami lietotājiem ar invaliditāti, izmantojot ARIA atribūtus un semantisko HTML.
• Internacionalizācija (i18n): Ieviesiet pareizu internacionalizāciju, lai attēlotu kļūdu ziņojumus lietotāja vēlamajā valodā. Var palīdzēt tādi pakalpojumi kā i18next vai natīvā JavaScript Intl API.

Labākās prakses daudzpakāpju formas validācijai

• Saglabājiet validācijas noteikumus kodolīgus: Sadaliet sarežģītu validācijas loģiku mazākās, atkārtoti lietojamās funkcijās.
• Rūpīgi testējiet: Rakstiet vienības testus, lai nodrošinātu savu validācijas noteikumu precizitāti un uzticamību.
• Izmantojiet validācijas bibliotēku: Apsveriet iespēju izmantot specializētu validācijas bibliotēku (piemēram, Yup, Zod), lai vienkāršotu procesu un uzlabotu koda kvalitāti. Šīs bibliotēkas bieži nodrošina uz shēmām balstītu validāciju, kas atvieglo sarežģītu validācijas noteikumu definēšanu un pārvaldību.
• Optimizējiet veiktspēju: Izvairieties no nevajadzīgām validācijas pārbaudēm, īpaši reāllaika validācijas laikā. Izmantojiet memoizācijas tehnikas, lai kešotu validācijas rezultātus.
• Sniedziet skaidras instrukcijas: Vadiet lietotājus cauri formas aizpildīšanas procesam ar skaidrām instrukcijām un noderīgiem padomiem.
• Apsveriet progresīvo atklāšanu: Rādiet tikai attiecīgos laukus katrai pakāpei, vienkāršojot formu un samazinot kognitīvo slodzi.

Alternatīvas bibliotēkas un pieejas

Lai gan šī rokasgrāmata koncentrējas uz pielāgotu useFormState āķi, pastāv vairākas izcilas formu bibliotēkas, kas nodrošina līdzīgu funkcionalitāti, bieži vien ar papildu funkcijām un veiktspējas optimizācijām. Dažas populāras alternatīvas ietver:

• Formik: Plaši izmantota bibliotēka formu stāvokļa un validācijas pārvaldībai React. Tā piedāvā deklaratīvu pieeju formu apstrādei un atbalsta dažādas validācijas stratēģijas.
• React Hook Form: Uz veiktspēju orientēta bibliotēka, kas izmanto nekontrolētus komponentus un React's ref API, lai samazinātu atkārtotus renderus. Tā nodrošina izcilu veiktspēju lielām un sarežģītām formām.
• Final Form: Daudzpusīga bibliotēka, kas atbalsta dažādus UI ietvarus un validācijas bibliotēkas. Tā piedāvā elastīgu un paplašināmu API formas uzvedības pielāgošanai.

Pareizās bibliotēkas izvēle ir atkarīga no jūsu specifiskajām prasībām un vēlmēm. Pieņemot lēmumu, ņemiet vērā tādus faktorus kā veiktspēja, lietošanas ērtums un funkciju kopums.

Starptautiskie apsvērumi

Veidojot formas globālai auditorijai, ir būtiski ņemt vērā internacionalizāciju un lokalizāciju. Šeit ir daži galvenie aspekti:

• Datuma un laika formāti: Izmantojiet lokālei specifiskus datuma un laika formātus, lai nodrošinātu konsekvenci un izvairītos no neskaidrībām.
• Skaitļu formāti: Izmantojiet lokālei specifiskus skaitļu formātus, tostarp valūtas simbolus un decimālos atdalītājus.
• Adrešu formāti: Pielāgojiet adrešu laukus dažādu valstu formātiem. Dažās valstīs pasta indeksi var būt nepieciešami pirms pilsētām, bet citās pasta indeksu var nebūt vispār.
• Tālruņa numura validācija: Izmantojiet tālruņa numuru validācijas bibliotēku, kas atbalsta starptautiskos tālruņa numuru formātus.
• Rakstzīmju kodēšana: Nodrošiniet, lai jūsu forma pareizi apstrādātu dažādas rakstzīmju kopas, tostarp Unikodu un citus nelatīņu rakstzīmes.
• No labās uz kreiso (RTL) izkārtojums: Atbalstiet RTL valodas, piemēram, arābu un ivritu, atbilstoši pielāgojot formas izkārtojumu.

Ņemot vērā šos starptautiskos aspektus, jūs varat izveidot formas, kas ir pieejamas un lietotājam draudzīgas globālai auditorijai.

Noslēgums

Daudzpakāpju formas validācijas konveijera ieviešana ar React useFormState āķi (vai alternatīvām bibliotēkām) var ievērojami uzlabot lietotāja pieredzi, palielināt veiktspēju un uzlabot koda uzturamību. Izprotot pamatkoncepcijas un piemērojot šajā rokasgrāmatā izklāstītās labākās prakses, jūs varat veidot robustas un mērogojamas formas, kas atbilst mūsdienu tīmekļa lietojumprogrammu prasībām.

Atcerieties par prioritāti noteikt lietotāja pieredzi, rūpīgi testēt un pielāgot savas validācijas stratēģijas sava projekta specifiskajām prasībām. Ar rūpīgu plānošanu un izpildi jūs varat izveidot formas, kas ir gan funkcionālas, gan patīkamas lietošanā.

Tālākai apguvei

• React oficiālā dokumentācija
• Formik dokumentācija
• React Hook Form dokumentācija