Uurige Reacti experimental_useFormState'i ja looge täiustatud vormivalideerimisahelaid. Õppige looma vastupidavaid ja hooldatavaid vorme praktiliste näidete abil.
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_useFormStatehaldab 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,
};
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;
}
}
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;
};
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 };
};
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 (
);
}
export default RegistrationForm;
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;
};
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.';
}
};
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;
};
Internatsionaliseerimise (i18n) kaalutlused
Globaalsele sihtrühmale vorme luues on internatsionaliseerimine hädavajalik. Arvestage järgmisega:
- Kuupäevavormingud: Kasutage teeki nagu
date-fnsvõimoment.js, et käsitleda erinevaid kuupäevavorminguid vastavalt kasutaja lokaadile. - Arvuvormingud: Kasutage
Intl.NumberFormatnumbrite vormindamiseks vastavalt kasutaja lokaadile. - Valuutavormingud: Kasutage
Intl.NumberFormatvaluutade korrektseks vormindamiseks, sealhulgas sobiva valuutasĂĽmboli ja kĂĽmnenderaldajaga. - Aadressivormingud: Kaaluge teegi nagu
libaddressinputkasutamist 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;
};
}
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 atribuutiid<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.