React useFormState Validacijos Konvejeris: Daugiapakopės Formų Validacijos Įvaldymas

Sudėtingų formų kūrimas su tvirta validacija yra dažnas iššūkis šiuolaikinėje interneto svetainių kūrimo praktikoje. React useFormState kabliukas siūlo galingą ir lankstų būdą valdyti formos būseną ir validaciją, leidžiantį kurti sudėtingus daugiapakopius validacijos konvejerius. Šis išsamus vadovas padės jums pereiti visą procesą, nuo pagrindų supratimo iki pažangių asinchroninės validacijos strategijų įgyvendinimo.

Kodėl Reikalinga Daugiapakopė Formų Validacija?

Tradicinė, vieno etapo formos validacija gali tapti sudėtinga ir neefektyvi, ypač kai susiduriama su formomis, turinčiomis daug laukų ar sudėtingų priklausomybių. Daugiapakopė validacija leidžia jums:

• Pagerinti Vartotojo Patirtį: Teikti tiesioginį grįžtamąjį ryšį apie konkrečias formos dalis, efektyviau vedant vartotojus per pildymo procesą.
• Padidinti Našumą: Vengti nereikalingų visos formos validacijos patikrų, optimizuojant našumą, ypač didelėse formose.
• Padidinti Kodo Priežiūros Paprastumą: Suskaidyti validacijos logiką į mažesnius, valdomus vienetus, todėl kodą lengviau suprasti, testuoti ir prižiūrėti.

useFormState Supratimas

useFormState kabliukas (dažnai pasiekiamas bibliotekose kaip react-use arba individualiuose sprendimuose) suteikia būdą valdyti formos būseną, validacijos klaidas ir pateikimo tvarkymą. Jo pagrindinės funkcijos apima:

• Būsenos Valdymas: Saugomos dabartinės formos laukų reikšmės.
• Validacija: Vykdomos validacijos taisyklės pagal formos reikšmes.
• Klaidų Sekimas: Sekamos validacijos klaidos, susijusios su kiekvienu lauku.
• Pateikimo Tvarkymas: Suteikiami mechanizmai formos pateikimui ir pateikimo rezultato tvarkymui.

Pagrindinio Validacijos Konvejerio Kūrimas

Pradėkime nuo paprasto dviejų etapų formos pavyzdžio: asmeninė informacija (vardas, el. paštas) ir adreso informacija (gatvė, miestas, šalis).

1 žingsnis: Apibrėžkite Formos Būseną

Pirmiausia apibrėžiame pradinę formos būseną, apimančią visus laukus:

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

2 žingsnis: Sukurkite Validacijos Taisykles

Toliau apibrėžiame validacijos taisykles. Šiame pavyzdyje reikalaukime, kad visi laukai būtų neužpildyti ir el. paštas būtų teisingo formato.

const validateField = (fieldName, value) => {
  if (!value) {
    return 'Šis laukas yra privalomas.';
  }

  if (fieldName === 'email' && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) {
    return 'Neteisingas el. pašto formatas.';
  }

  return null; // Nėra klaidos
};

3 žingsnis: Įdiekite useFormState Kabliuką

Dabar integruokime validacijos taisykles į mūsų React komponentą, naudodami (hipotetinį) useFormState kabliuką:

import React, { useState } from 'react';

// Darome prielaidą, kad tai individualus sprendimas arba biblioteka, pvz., 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 keičiantis vertei geresnei UX (pasirinktinai)
    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}); // Sujungiame su esamomis klaidomis
    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) {
      // Pateikite formą
      console.log('Forma pateikta:', values);
      alert('Forma pateikta!'); //Pakeiskite tikra pateikimo logika
    } else {
      console.log('Formoje yra klaidų, prašome jas ištaisyti.');
    }
  };

  return (
    

      {currentStage === 1 && (
        

          
Asmeninė Informacija
          
            Vardas:
            
            {errors.firstName && {errors.firstName}}
          
          

          
            Pavardė:
            
            {errors.lastName && {errors.lastName}}
          
          

          
            El. paštas:
            
            {errors.email && {errors.email}}
          
          

        
      )}

      {currentStage === 2 && (
        

          
Adreso Informacija
          
            Gatvė:
            
            {errors.street && {errors.street}}
          
          

          
            Miestas:
            
            {errors.city && {errors.city}}
          
          

          
            Šalis:
            
            {errors.country && {errors.country}}
          
          

        
      )}

      

        {currentStage > 1 && Atgal}
        {currentStage < 2 && Toliau}
        {currentStage === 2 && Pateikti}
      
    
  );
};

export default MyForm;

4 žingsnis: Įdiekite Etapų Navigaciją

Naudokite būsenos kintamuosius, kad valdytumėte dabartinį formos etapą ir atvaizduotumėte atitinkamą formos sekciją pagal dabartinį etapą.

Pažangios Validacijos Technikos

Asinchroninė Validacija

Kartais validacijai reikalinga sąveika su serveriu, pavyzdžiui, tikrinant, ar vartotojo vardas yra laisvas. Tai reikalauja asinchroniškos validacijos. Štai kaip ją integruoti:

const validateUsername = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.available) {
      return null; // Vartotojo vardas yra laisvas
    } else {
      return 'Vartotojo vardas jau užimtas.';
    }
  } catch (error) {
    console.error('Klaida tikrinant vartotojo vardą:', error);
    return 'Klaida tikrinant vartotojo vardą. Prašome bandyti vėl.'; // Tinkamai apdorokite tinklo klaidas
  }
};

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) {
        // Pateikite formą
        console.log('Forma pateikta:', values);
        alert('Forma pateikta!'); //Pakeiskite tikra pateikimo logika
      } else {
        console.log('Formoje yra klaidų, prašome jas ištaisyti.');
      }
  };



  return {
    values,
    errors,
    handleChange,
    handleSubmit,
    isSubmitting //Pasirinktinai: rodyti įkrovimo pranešimą validacijos metu
  };
};

Šis pavyzdys apima validateUsername funkciją, kuri atlieka API užklausą, siekdama patikrinti vartotojo vardo prieinamumą. Užtikrinkite, kad tvarkote galimas tinklo klaidas ir teikiate tinkamą grįžtamąjį ryšį vartotojui.

Sąlyginė Validacija

Kai kuriuos laukus gali reikėti validuoti tik atsižvelgiant į kitų laukų reikšmes. Pavyzdžiui, laukas „Įmonės svetainė“ gali būti privalomas tik tada, jei vartotojas nurodo, kad yra įdarbintas. Įgyvendinkite sąlyginę validaciją savo validacijos funkcijose:

const validateFieldConditional = (fieldName, value, formValues) => {
  if (fieldName === 'companyWebsite' && formValues.employmentStatus === 'employed' && !value) {
    return 'Įmonės svetainė yra privaloma, jei esate įdarbintas.';
  }
  return validateField(fieldName, value); // Perduodame pagrindinei validacijai
};

Dinaminės Validacijos Taisyklės

Kartais pačios validacijos taisyklės turi būti dinamiškos, priklausomai nuo išorinių veiksnių ar duomenų. Tai galite pasiekti perduodami dinamines validacijos taisykles kaip argumentus savo validacijos funkcijoms:

const validateFieldWithDynamicRules = (fieldName, value, rules) => {
  if (rules && rules[fieldName] && rules[fieldName].maxLength && value.length > rules[fieldName].maxLength) {
    return `Šis laukas turi būti trumpesnis nei ${rules[fieldName].maxLength} simbolių.`;
  }
  return validateField(fieldName, value); // Perduodame pagrindinei validacijai
};

Klaidų Tvarkymas ir Vartotojo Patirtis

Efektyvus klaidų tvarkymas yra labai svarbus teigiamai vartotojo patirčiai. Apsvarstykite šiuos aspektus:

• Aiškiai Rodykite Klaidas: Padėkite klaidų pranešimus šalia atitinkamų įvesties laukų. Naudokite aiškią ir glaustą kalbą.
• Validacija Realiu Laiku: Validuokite laukus, kai vartotojas rašo, teikdami tiesioginį grįžtamąjį ryšį. Atsižvelkite į našumo pasekmes; jei reikia, naudokite „debounce“ arba „throttle“ validacijos iškvietimams.
• Sutelkite Dėmesį į Klaidas: Po pateikimo, nukreipkite vartotojo dėmesį į pirmą lauką su klaida.
• Prieinamumas: Užtikrinkite, kad klaidų pranešimai būtų prieinami neįgaliems vartotojams, naudojant ARIA atributus ir semantinį HTML.
• Internacionalizacija (i18n): Įgyvendinkite tinkamą internacionalizaciją, kad klaidų pranešimai būtų rodomi vartotojo pageidaujama kalba. Gali padėti paslaugos, tokios kaip „i18next“ arba natūralus JavaScript „Intl API“.

Geriausios Daugiapakopės Formų Validacijos Praktikos

• Laikykite Validacijos Taisykles Glaustomis: Suskaidykite sudėtingą validacijos logiką į mažesnes, pakartotinai naudojamas funkcijas.
• Kruopščiai Testuokite: Rašykite vienetinius testus, kad užtikrintumėte savo validacijos taisyklių tikslumą ir patikimumą.
• Naudokite Validacijos Biblioteką: Apsvarstykite galimybę naudoti specializuotą validacijos biblioteką (pvz., Yup, Zod), kad supaprastintumėte procesą ir pagerintumėte kodo kokybę. Šios bibliotekos dažnai siūlo schemomis pagrįstą validaciją, palengvinančią sudėtingų validacijos taisyklių apibrėžimą ir valdymą.
• Optimizuokite Našumą: Venkite nereikalingų validacijos patikrų, ypač realiu laiku. Naudokite „memoization“ technikas validacijos rezultatams talpinti.
• Pateikite Aiškia Instrukcijas: Nurodykite vartotojams, kaip pildyti formą, pateikdami aiškias instrukcijas ir naudingus patarimus.
• Apsvarstykite Progresyvų Atskleidimą: Rodykite tik atitinkamus laukus kiekvienam etapui, supaprastindami formą ir sumažindami kognityvinę apkrovą.

Alternatyvios Bibliotekos ir Metodai

Nors šis vadovas sutelktas į individualų useFormState kabliuką, egzistuoja keletas puikių formų bibliotekų, kurios teikia panašią funkcionalumą, dažnai su papildomomis funkcijomis ir našumo optimizavimais. Kai kurios populiarios alternatyvos apima:

• Formik: Plačiai naudojama biblioteka formos būsenos ir validacijos valdymui React aplinkoje. Ji siūlo deklaratyvų požiūrį į formų tvarkymą ir palaiko įvairias validacijos strategijas.
• React Hook Form: Į našumą orientuota biblioteka, kuri naudoja nekontroliuojamus komponentus ir React „ref API“, kad sumažintų pervaizdavimų skaičių. Ji užtikrina puikų našumą didelėms ir sudėtingoms formoms.
• Final Form: Universali biblioteka, palaikanti įvairias UI sistemas ir validacijos bibliotekas. Ji siūlo lankstų ir išplečiamą API formos elgsenai pritaikyti.

Tinkamos bibliotekos pasirinkimas priklauso nuo jūsų konkrečių reikalavimų ir pageidavimų. Priimdami sprendimą, atsižvelkite į tokius veiksnius kaip našumas, naudojimo paprastumas ir funkcijų rinkinys.

Tarptautiniai Aspektai

Kuriant formas globaliai auditorijai, būtina atsižvelgti į internacionalizaciją ir lokalizaciją. Štai keletas pagrindinių aspektų:

• Datos ir Laiko Formatai: Naudokite vietai būdingus datos ir laiko formatus, kad užtikrintumėte nuoseklumą ir išvengtumėte nesusipratimų.
• Skaičių Formatai: Naudokite vietai būdingus skaičių formatus, įskaitant valiutos simbolius ir dešimtainius skyriklius.
• Adresų Formatai: Pritaikykite adreso laukus skirtingiems šalių formatams. Kai kuriose šalyse pašto kodai gali būti reikalaujami prieš miestus, o kitose jų gali visai nebūti.
• Telefono Numerio Validacija: Naudokite telefono numerio validacijos biblioteką, kuri palaiko tarptautinius telefono numerių formatus.
• Simbolių Kodavimas: Užtikrinkite, kad jūsų forma teisingai tvarkytų skirtingus simbolių rinkinius, įskaitant Unicode ir kitus nelotyniškus simbolius.
• Iš Dešinės į Kairę (RTL) Išdėstymas: Palaikykite RTL kalbas, tokias kaip arabų ir hebrajų, atitinkamai pritaikydami formos išdėstymą.

Atsižvelgdami į šiuos tarptautinius aspektus, galite sukurti formas, kurios yra prieinamos ir patogios naudoti globaliai auditorijai.

Išvada

Daugiapakopio formos validacijos konvejerio įgyvendinimas su React useFormState kabliuku (ar alternatyviomis bibliotekomis) gali žymiai pagerinti vartotojo patirtį, padidinti našumą ir palengvinti kodo priežiūrą. Suprasdami pagrindines koncepcijas ir taikydami šiame vadove aprašytas geriausias praktikas, galite kurti tvirtas ir keičiamo dydžio formas, atitinkančias šiuolaikinių interneto programų reikalavimus.

Nepamirškite teikti pirmenybės vartotojo patirčiai, kruopščiai testuoti ir pritaikyti savo validacijos strategijas pagal konkrečius projekto reikalavimus. Atidžiai planuodami ir vykdydami, galite sukurti formas, kurios yra tiek funkcionalios, tiek malonios naudoti.

Tolimesniam Mokymuisi

• React Oficiali Dokumentacija
• Formik Dokumentacija
• React Hook Form Dokumentacija