Reactin experimental_useFormState-validointiketju: Vankkojen lomakkeen validointiketjujen rakentaminen

Lomakkeen validointi on vankkojen ja käyttäjäystävällisten verkkosovellusten kulmakivi. Reactin experimental_useFormState-hook tarjoaa tehokkaan ja joustavan tavan hallita lomakkeen tilaa ja toteuttaa monimutkaisia validointiketjuja. Tämä blogikirjoitus syventyy siihen, miten experimental_useFormState-hookia voidaan hyödyntää ylläpidettävien, skaalautuvien ja kansainvälisesti mukautuvien lomakkeen validointijärjestelmien luomiseen.

experimental_useFormState-hookin ymmärtäminen

experimental_useFormState on kokeellinen React-hook (tätä kirjoitettaessa; tarkista aina virallisesta React-dokumentaatiosta viimeisin tilanne), joka on suunniteltu yksinkertaistamaan lomakkeiden hallintaa ja validointia. Se käsittelee lomakkeen tilapäivitykset ja antaa sinun määritellä reducer-funktioita monimutkaisempien tilasiirtymien hallintaan. Sen keskeinen etu on sen kyky integroitua saumattomasti asynkronisiin operaatioihin ja palvelinpuolen validointiin.

Ydinkäsitteet

• Tilan hallinta: experimental_useFormState hallitsee koko lomakkeen tilaa, mikä vähentää yksittäisten lomakekenttien päivittämiseen liittyvää rutiinikoodia.
• Reducer-funktiot: Se hyödyntää reducer-funktioita tilapäivitysten käsittelyyn, mikä mahdollistaa monimutkaisen logiikan ja varmistaa ennustettavat tilasiirtymät. Tämä on samankaltaista kuin useReducer, mutta räätälöity lomakkeen tilaa varten.
• Asynkroniset operaatiot: Se integroituu saumattomasti asynkronisiin operaatioihin, mikä helpottaa palvelinpuolen validoinnin ja lähetyksen käsittelyä.
• Validointiketju: Voit luoda ketjun validointifunktioita, jotka suoritetaan peräkkäin, mikä tarjoaa jäsennellyn ja organisoidun lähestymistavan lomakkeen validointiin.

Validointiketjun luominen

Validointiketju on sarja funktioita, jotka suoritetaan peräkkäin lomakkeen tietojen validoimiseksi. Jokainen funktio suorittaa tietyn validointitarkistuksen, ja ketju palauttaa kootun tuloksen, joka ilmaisee, onko lomake validi, sekä mahdolliset virheilmoitukset. Tämä lähestymistapa edistää modulaarisuutta, uudelleenkäytettävyyttä ja ylläpidettävyyttä.

Esimerkki: Yksinkertainen rekisteröintilomake

Havainnollistetaan tätä perusrekisteröintilomakkeella, joka vaatii käyttäjänimen, sähköpostiosoitteen ja salasanan.

1. Lomakkeen tilan määrittely

Ensin määrittelemme lomakkeemme alkutilan:

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

            

              
                Copy
              
            
          

2. Reducer-funktion toteuttaminen

Seuraavaksi luomme reducer-funktion käsittelemään tilapäivityksiä:

            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. Validointifunktioiden määrittely

Nyt määrittelemme yksittäiset validointifunktiot kullekin kentälle:

            const validateUsername = (username) => {
  if (!username) {
    return 'Käyttäjänimi on pakollinen.';
  } else if (username.length < 3) {
    return 'Käyttäjänimen on oltava vähintään 3 merkkiä pitkä.';
  } else if (username.length > 20) {
    return 'Käyttäjänimi ei voi olla pidempi kuin 20 merkkiä.';
  }
  return null;
};

const validateEmail = (email) => {
  if (!email) {
    return 'Sähköpostiosoite on pakollinen.';
  } else if (!/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(email)) {
    return 'Sähköpostiosoite ei ole kelvollinen.';
  }
  return null;
};

const validatePassword = (password) => {
  if (!password) {
    return 'Salasana on pakollinen.';
  } else if (password.length < 8) {
    return 'Salasanan on oltava vähintään 8 merkkiä pitkä.';
  }
  return null;
};

            

              
                Copy
              
            
          

4. Validointiketjun luominen

Kokoamme validointifunktiot ketjuksi:

            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. Integrointi experimental_useFormState-hookin kanssa

            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) {
      // Lähetä lomake
      console.log('Lomake on validi, lähetetään...', state);
    } else {
      console.log('Lomake on virheellinen, korjaa virheet.');
    }
  };

  return (
    

      

        Käyttäjänimi:
        
        {state.errors.username && 
{state.errors.username}
}
      
      

        Sähköposti:
        
        {state.errors.email && 
{state.errors.email}
}
      
      

        Salasana:
        
        {state.errors.password && 
{state.errors.password}
}
      
      Rekisteröidy
    
  );
}

export default RegistrationForm;

            

              
                Copy
              
            
          

Edistyneet validointitekniikat

Ehdollinen validointi

Joskus sinun täytyy validoida kenttä toisen kentän arvon perusteella. Esimerkiksi saatat vaatia puhelinnumeron vain, jos käyttäjä valitsee tietyn maan.

            const validatePhoneNumber = (phoneNumber, country) => {
  if (country === 'USA' && !phoneNumber) {
    return 'Puhelinnumero on pakollinen USA:ssa.';
  }
  return null;
};

            

              
                Copy
              
            
          

Asynkroninen validointi

Asynkroninen validointi on ratkaisevan tärkeää, kun sinun täytyy tarkistaa kentän kelpoisuus palvelinpuolen tietokantaa tai APIa vasten. Esimerkiksi saatat haluta varmistaa, onko käyttäjänimi jo käytössä.

            const validateUsernameAvailability = async (username) => {
  try {
    const response = await fetch(`/api/check-username?username=${username}`);
    const data = await response.json();
    if (data.isTaken) {
      return 'Käyttäjänimi on jo varattu.';
    }
    return null;
  } catch (error) {
    console.error('Virhe tarkistettaessa käyttäjänimen saatavuutta:', error);
    return 'Virhe tarkistettaessa käyttäjänimen saatavuutta.';
  }
};

            

              
                Copy
              
            
          

Sinun tulee integroida tämä asynkroninen validointi reduceriisi ja käsitellä asynkroninen luonne asianmukaisesti käyttämällä Promiseja tai async/await-syntaksia.

Mukautetut validointisäännöt

Voit luoda mukautettuja validointisääntöjä käsittelemään erityistä liiketoimintalogiikkaa tai muotoiluvaatimuksia. Esimerkiksi saatat joutua validoimaan postinumeron valitun maan perusteella.

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

            

              
                Copy
              
            
          

Kansainvälistämisen (i18n) huomioiminen

Kun rakennat lomakkeita maailmanlaajuiselle yleisölle, kansainvälistäminen on välttämätöntä. Huomioi seuraavat seikat:

• Päivämäärämuodot: Käytä kirjastoa, kuten date-fns tai moment.js, käsitelläksesi eri päivämäärämuotoja käyttäjän lokaalin perusteella.
• Lukumuodot: Käytä Intl.NumberFormat-oliota muotoillaksesi numeroita käyttäjän lokaalin mukaisesti.
• Valuuttamuodot: Käytä Intl.NumberFormat-oliota muotoillaksesi valuuttoja oikein, mukaan lukien sopiva valuuttasymboli ja desimaalierotin.
• Osoitemuodot: Harkitse kirjaston, kuten libaddressinput, käyttöä käsitelläksesi eri osoitemuotoja käyttäjän maan perusteella.
• Käännetyt virheilmoitukset: Tallenna virheilmoitukset käännöstiedostoon ja käytä kirjastoa, kuten i18next, näyttääksesi ne käyttäjän kielellä.

Esimerkki: Käännetyt virheilmoitukset

Näin voit käyttää i18next-kirjastoa virheilmoitusten kääntämiseen:

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

// fi.json
{
  "username_required": "Käyttäjänimi on pakollinen.",
  "email_required": "Sähköpostiosoite on pakollinen.",
  "invalid_email": "Sähköpostiosoite ei ole kelvollinen."
}

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

Saavutettavuuden huomioiminen

Lomakkeen saavutettavuuden varmistaminen on ratkaisevan tärkeää inklusiivisten verkkosovellusten luomisessa. Noudata näitä ohjeita:

• Käytä semanttista HTML:ää: Käytä asianmukaisia HTML-elementtejä, kuten <label>, <input> ja <button>.
• Tarjoa selkeät etiketit: Yhdistä etiketit lomakekenttiin käyttämällä for-attribuuttia <label>-elementissä ja id-attribuuttia <input>-elementissä.
• Käytä ARIA-attribuutteja: Käytä ARIA-attribuutteja antamaan lisätietoa avustaville teknologioille, kuten ruudunlukijoille.
• Tarjoa virheilmoitukset: Näytä selkeät ja ytimekkäät virheilmoitukset, jotka ovat helppoja ymmärtää. Käytä ARIA-attribuutteja, kuten aria-describedby, yhdistääksesi virheilmoitukset lomakekenttiin.
• Varmista näppäimistönavigointi: Varmista, että käyttäjät voivat navigoida lomakkeella näppäimistöä käyttäen. Käytä tabindex-attribuuttia hallitaksesi kohdistuksen järjestystä.
• Käytä riittävää kontrastia: Varmista riittävä kontrasti tekstin ja taustavärien välillä, jotta lomake on luettava näkövammaisille käyttäjille.

Parhaat käytännöt

• Pidä validointifunktiot modulaarisina: Luo pieniä, uudelleenkäytettäviä validointifunktioita, jotka suorittavat tiettyjä tarkistuksia.
• Käytä johdonmukaista virheidenkäsittelystrategiaa: Toteuta johdonmukainen virheidenkäsittelystrategia koko sovelluksessasi.
• Tarjoa käyttäjäystävällisiä virheilmoituksia: Näytä selkeät ja ytimekkäät virheilmoitukset, jotka auttavat käyttäjiä ymmärtämään, mikä meni vikaan ja miten se korjataan.
• Testaa lomakkeesi perusteellisesti: Testaa lomakkeesi erityyppisillä tiedoilla ja eri selaimilla varmistaaksesi, että ne toimivat oikein.
• Käytä lomakekirjastoa: Harkitse lomakekirjaston, kuten Formik tai React Hook Form, käyttöä yksinkertaistaaksesi lomakkeiden hallintaa ja validointia. Nämä kirjastot tarjoavat laajan valikoiman ominaisuuksia, kuten lomakkeen tilanhallinnan, validoinnin ja lähetyksen käsittelyn.
• Keskitä virheilmoitusten määrittelyt: Ylläpidä keskitettyä varastoa kaikista lomakkeen virheilmoituksista johdonmukaisuuden ja ylläpidettävyyden helpottamiseksi. Tämä myös yksinkertaistaa kansainvälistämisprosessia.

Yhteenveto

Reactin experimental_useFormState-hook yhdistettynä hyvin määriteltyyn validointiketjuun tarjoaa tehokkaan ja joustavan tavan rakentaa vankkoja ja ylläpidettäviä lomakkeita. Noudattamalla tässä blogikirjoituksessa esitettyjä parhaita käytäntöjä voit luoda lomakkeita, jotka ovat käyttäjäystävällisiä, saavutettavia ja kansainvälisesti mukautuvia. Muista aina tarkistaa virallisesta React-dokumentaatiosta viimeisimmät päivitykset kokeellisista ominaisuuksista.

Tehokkaan lomakkeen validoinnin rakentaminen on jatkuva oppimisprosessi. Kokeile erilaisia tekniikoita ja sovella niitä omiin tarpeisiisi. Tärkeintä on priorisoida käyttäjäkokemus ja luoda lomakkeita, jotka ovat sekä helppokäyttöisiä että luotettavia.