Reacti experimental_useFormState valideerimisahel: Tugevate vormivalideerimisahelate ehitamine

Vormide valideerimine on vastupidavate ja kasutajasõbralike veebirakenduste loomise nurgakivi. Reacti experimental_useFormState hook pakub võimsat ja paindlikku lähenemist vormi oleku haldamiseks ja keerukate valideerimisahelate rakendamiseks. See blogipostitus süveneb sellesse, kuidas kasutada experimental_useFormState'i, et luua hooldatavaid, skaleeritavaid ja rahvusvaheliselt kohandatavaid vormivalideerimissüsteeme.

experimental_useFormState'i mõistmine

experimental_useFormState on eksperimentaalne Reacti hook (selle kirjutamise seisuga; kontrollige alati ametlikust Reacti dokumentatsioonist uusimat staatust), mis on loodud vormihalduse ja valideerimise lihtsustamiseks. See tegeleb vormi oleku uuendustega ja võimaldab teil defineerida reducer-funktsioone keerukamate olekumuutuste haldamiseks. Selle peamine eelis seisneb võimes sujuvalt integreeruda asünkroonsete operatsioonide ja serveripoolse valideerimisega.

Põhimõisted

• Oleku haldamine: experimental_useFormState haldab kogu vormi olekut, vähendades korduvat koodi, mis on seotud üksikute vormiväljade uuendamisega.
• Reducer-funktsioonid: See kasutab olekuvärskenduste käsitlemiseks reducer-funktsioone, võimaldades keerukat loogikat ja tagades etteaimatavad olekumuutused. See sarnaneb useReducer'iga, kuid on kohandatud vormi oleku jaoks.
• Asünkroonsed operatsioonid: See integreerub sujuvalt asünkroonsete operatsioonidega, muutes serveripoolse valideerimise ja esitamise lihtsaks.
• Valideerimisahel: Saate luua valideerimisfunktsioonide ahela, mida käivitatakse järjestikku, pakkudes struktureeritud ja organiseeritud lähenemist vormi valideerimisele.

Valideerimisahela loomine

Valideerimisahel on funktsioonide jada, mida käivitatakse üksteise järel vormi andmete valideerimiseks. Iga funktsioon teostab konkreetse valideerimiskontrolli ja ahel tagastab koondtulemuse, mis näitab, kas vorm on kehtiv, ja kõik seotud veateated. See lähenemine soodustab modulaarsust, taaskasutatavust ja hooldatavust.

Näide: Lihtne registreerimisvorm

Illustreerime seda lihtsa registreerimisvormiga, mis nõuab kasutajanime, e-posti aadressi ja parooli.

1. Vormi oleku defineerimine

Esmalt defineerime oma vormi algoleku:

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

            

              
                Copy
              
            
          

2. Reducer-funktsiooni implementeerimine

Järgmisena loome reducer-funktsiooni olekuvärskenduste käsitlemiseks:

            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. Valideerimisfunktsioonide defineerimine

Nüüd defineerime iga välja jaoks eraldi valideerimisfunktsioonid:

            const validateUsername = (username) => {
  if (!username) {
    return 'Kasutajanimi on kohustuslik.';
  } else if (username.length < 3) {
    return 'Kasutajanimi peab olema vähemalt 3 tähemärki pikk.';
  } else if (username.length > 20) {
    return 'Kasutajanimi ei tohi olla pikem kui 20 tähemärki.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'E-posti aadress on kohustuslik.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'E-posti aadress ei ole kehtiv.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Parool on kohustuslik.';
  } else if (password.length < 8) {
    return 'Parool peab olema vähemalt 8 tähemärki pikk.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Valideerimisahela loomine

Koondame valideerimisfunktsioonid ahelasse:

            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. Integreerimine experimental_useFormState'iga

            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) {
      // Esita vorm
      console.log('Vorm on kehtiv, esitatakse...', state);
    } else {
      console.log('Vorm on vigane, palun parandage vead.');
    }
  };

  return (
    

      

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

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

        Parool:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Registreeri
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Täiustatud valideerimistehnikad

Tingimuslik valideerimine

Mõnikord on vaja välja valideerida teise välja väärtuse põhjal. Näiteks võite nõuda telefoninumbrit ainult siis, kui kasutaja valib teatud riigi.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'USA puhul on telefoninumber kohustuslik.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asünkroonne valideerimine

Asünkroonne valideerimine on ülioluline, kui peate kontrollima välja kehtivust serveripoolse andmebaasi või API vastu. Näiteks võiksite kontrollida, kas kasutajanimi on juba võetud.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Kasutajanimi on juba võetud.';
    }
    return null;
  } catch (error) {
    console.error('Viga kasutajanime saadavuse kontrollimisel:', error);
    return 'Viga kasutajanime saadavuse kontrollimisel.';
  }
};

            

              
                Copy
              
            
          

Peate selle asünkroonse valideerimise oma reducer'isse integreerima ja asünkroonset olemust sobivalt käsitlema, kasutades Promise'e või async/await'i.

Kohandatud valideerimisreeglid

Saate luua kohandatud valideerimisreegleid konkreetse äriloogika või vormindamisnõuete käsitlemiseks. Näiteks võib teil olla vaja valideerida postiindeksit valitud riigi põhjal.

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

            

              
                Copy
              
            
          

Internatsionaliseerimise (i18n) kaalutlused

Globaalsele sihtrühmale vorme luues on internatsionaliseerimine hädavajalik. Arvestage järgmisega:

• Kuupäevavormingud: Kasutage teeki nagu date-fns või moment.js, et käsitleda erinevaid kuupäevavorminguid vastavalt kasutaja lokaadile.
• Arvuvormingud: Kasutage Intl.NumberFormat numbrite vormindamiseks vastavalt kasutaja lokaadile.
• Valuutavormingud: Kasutage Intl.NumberFormat valuutade korrektseks vormindamiseks, sealhulgas sobiva valuutasümboli ja kümnenderaldajaga.
• Aadressivormingud: Kaaluge teegi nagu libaddressinput kasutamist erinevate aadressivormingute käsitlemiseks vastavalt kasutaja riigile.
• Tõlgitud veateated: Salvestage veateated tõlkefaili ja kasutage teeki nagu i18next, et kuvada need kasutaja keeles.

Näide: Tõlgitud veateated

Siin on näide, kuidas saate kasutada i18next'i veateadete tõlkimiseks:

            // en.json
{
  "username_required": "Username is required.",
  "email_required": "Email is required.",
  "invalid_email": "Email is not valid."
}

// et.json
{
  "username_required": "Kasutajanimi on kohustuslik.",
  "email_required": "E-posti aadress on kohustuslik.",
  "invalid_email": "E-posti aadress ei ole kehtiv."
}

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

Juurdepääsetavuse kaalutlused

Vormide juurdepääsetavuse tagamine on kaasavate veebirakenduste loomisel ülioluline. Järgige neid juhiseid:

• Kasutage semantilist HTML-i: Kasutage sobivaid HTML-elemente nagu <label>, <input> ja <button>.
• Pakkuge selgeid silte: Seostage sildid vormiväljadega, kasutades atribuuti for <label> elemendil ja atribuuti id <input> elemendil.
• Kasutage ARIA atribuute: Kasutage ARIA atribuute, et pakkuda lisateavet abitehnoloogiatele, näiteks ekraanilugejatele.
• Pakkuge veateateid: Kuvage selgeid ja lühikesi veateateid, mis on kergesti mõistetavad. Kasutage ARIA atribuute nagu aria-describedby, et seostada veateated vormiväljadega.
• Tagage klaviatuuriga navigeerimine: Veenduge, et kasutajad saaksid vormis navigeerida klaviatuuri abil. Kasutage fookuse järjekorra kontrollimiseks atribuuti tabindex.
• Kasutage piisavat kontrasti: Tagage piisav kontrast teksti ja taustavärvide vahel, et vorm oleks loetav ka nägemispuudega kasutajatele.

Parimad tavad

• Hoidke valideerimisfunktsioonid modulaarsed: Looge väikesi, taaskasutatavaid valideerimisfunktsioone, mis teostavad konkreetseid kontrolle.
• Kasutage järjepidevat veakäsitlusstrateegiat: Rakendage kogu oma rakenduses järjepidevat veakäsitlusstrateegiat.
• Pakkuge kasutajasõbralikke veateateid: Kuvage selgeid ja lühikesi veateateid, mis aitavad kasutajatel mõista, mis valesti läks ja kuidas seda parandada.
• Testige oma vorme põhjalikult: Testige oma vorme erinevat tüüpi andmete ja erinevate brauseritega, et tagada nende korrektne toimimine.
• Kasutage vormiteeki: Kaaluge vormiteegi, näiteks Formik või React Hook Form, kasutamist vormihalduse ja valideerimise lihtsustamiseks. Need teegid pakuvad laia valikut funktsioone, nagu vormi oleku haldamine, valideerimine ja esitamise käsitlemine.
• Tsentraliseerige veateadete definitsioonid: Hoidke kõigi vormi veateadete keskset hoidlat, et hõlbustada järjepidevust ja hooldatavust. See lihtsustab ka internatsionaliseerimisprotsessi.

Kokkuvõte

Reacti experimental_useFormState hook koos hästi defineeritud valideerimisahelaga pakub võimsat ja paindlikku lähenemist vastupidavate ja hooldatavate vormide ehitamiseks. Järgides selles blogipostituses kirjeldatud parimaid tavasid, saate luua vorme, mis on kasutajasõbralikud, juurdepääsetavad ja rahvusvaheliselt kohandatavad. Ärge unustage alati viidata ametlikule Reacti dokumentatsioonile eksperimentaalsete funktsioonide uusimate värskenduste osas.

Tõhusa vormivalideerimise loomine on pidev õppimisprotsess. Katsetage erinevaid tehnikaid ja kohandage neid oma konkreetsetele vajadustele. Oluline on seada esikohale kasutajakogemus ja luua vorme, mis on nii lihtsasti kasutatavad kui ka usaldusväärsed.