Validointisäännöt ja virheilmoitukset
Soveltakaa sisäänrakennettuja validointisääntöjä, kuten required, minLength ja pattern, rules-propissa ja renderöikää error-objekti kunkin kentän alapuolelle.
Validointisäännöt ja virheilmoitukset on ilmainen React Native Academy-oppitunti CoddyKitissä. Tämä on oppitunti 2/4. Voit lukea tästä oppimispolusta kokonaan mitkä tahansa 3 oppituntia ilmaiseksi — sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä käytännön harjoittelun sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Oppitunti kuuluu React Native Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Yleiskatsaus sisäänrakennettuihin validointisääntöihin
react-hook-form tarjoaa useita sisäänrakennettuja validointisääntöjä, jotka kattavat yleisimmät vaatimukset ilman mukautetun koodin kirjoittamista. Näitä ovat: required, minLength, maxLength, min (numeerinen vähimmäisarvo), max (numeerinen enimmäisarvo) ja pattern (säännöllisen lausekkeen mukaisuus). Kullekin säännölle voi antaa yksinkertaisen arvon tai objektin, joka sisältää value- ja message-arvot mukautettua virheilmoitusta varten.
required-sääntö
required-sääntö varmistaa, ettei kenttää jätetä tyhjäksi. Voitte antaa totuusarvon true (jolloin käytetään yleistä virheilmoitusta) tai merkkijonon (josta tulee virheilmoitus). Mobiililomakkeiden pakollisissa kentissä kannattaa aina antaa kuvaava viesti, jotta käyttäjä tietää heti, mikä puuttuu, eikä hänen tarvitse arvailla.
// Simple boolean — uses generic message
rules={{ required: true }}
// String shorthand — message is the string
rules={{ required: 'Please enter your email' }}
// Full object form
rules={{ required: { value: true, message: 'Email is required' } }}minLength- ja maxLength-säännöt
Käyttäkää minLength-sääntöä vähimmäismerkkimäärän pakottamiseen ja maxLength-sääntöä syötteen enimmäispituuden rajoittamiseen. Ne ovat välttämättömiä esimerkiksi käyttäjänimikentissä (vähintään 3 merkkiä), salasanoissa (vähintään 8 merkkiä) ja esittelyteksteissä (enintään 200 merkkiä). Molemmat säännöt vertaavat merkkijonon length-ominaisuutta määrittämäänne arvoon.
rules={{
required: 'Username is required',
minLength: {
value: 3,
message: 'Username must be at least 3 characters',
},
maxLength: {
value: 20,
message: 'Username cannot exceed 20 characters',
},
}}pattern-sääntö säännöllisen lausekkeen validointiin
pattern-sääntö vertaa kentän arvoa säännölliseen lausekkeeseen. Käyttäkää sitä sähköpostiosoitteiden, puhelinnumeroiden, postinumeroiden tai muiden rakenteisten tekstimuotojen tarkistamiseen. Antakaa säännöllinen lauseke value-ominaisuutena. React-hook-form vertaa koko merkkijonoa kuvioon, joten ankkureita ei yleensä tarvita.
// Email validation
rules={{
pattern: {
value: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
message: 'Please enter a valid email address',
},
}}
// Phone number (digits only, 10-15 chars)
rules={{
pattern: {
value: /^[0-9]{10,15}$/,
message: 'Enter a valid phone number (digits only)',
},
}}min- ja max-säännöt numeroille
Käyttäkää numeerisissa syötteissä — kuten määrissä, i'issä ja hinnoissa — min- ja max-sääntöjä. Ne vertaavat syötemerkkijonon numeerista arvoa, eivät sen pituutta. Asettamalla TextInput-komponentille keyboardType='numeric' helpotatte numeroiden syöttämistä. Yhdistäkää tämä pattern-sääntöön, jos haluatte varmistaa, että syötteessä käytetään vain numeroita.
rules={{
required: 'Age is required',
min: { value: 18, message: 'You must be at least 18 years old' },
max: { value: 120, message: 'Please enter a valid age' },
pattern: {
value: /^[0-9]+$/,
message: 'Age must be a whole number',
},
}}Mukautettu validointi validate-säännöllä
validate-sääntö hyväksyy funktion (tai nimetyt funktiot sisältävän objektin), joka vastaanottaa kentän nykyisen arvon ja palauttaa kelvollisessa tapauksessa true tai virheellisessä tapauksessa virheilmoituksen merkkijonona. Käyttäkää sitä monimutkaisiin vaatimuksiin, joita sisäänrakennetut säännöt eivät pysty ilmaisemaan, kuten salasanojen vastaavuuden tarkistamiseen tai sen selvittämiseen, onko käyttäjänimi jo käytössä asynkronisen API-kutsun avulla.
// Single custom validator
rules={{
validate: (value) =>
value.includes('@') || 'Email must contain an @ symbol',
}}
// Multiple named validators
rules={{
validate: {
notEmpty: (v) => v.trim().length > 0 || 'Cannot be blank',
noSpaces: (v) => !v.includes(' ') || 'No spaces allowed',
},
}}Asynkroninen validate palvelinpuolen tarkistuksiin
validate-funktio voi olla async. Tämä on hyödyllistä tarkistettaessa, onko käyttäjänimi tai sähköpostiosoite jo käytössä. Funktio vastaanottaa syötetyn arvon, tekee API-kutsun ja palauttaa virhemerkkijonon, jos arvo on jo käytössä, tai true-arvon (tai undefined), jos se on saatavilla. Syöte merkitään virheelliseksi, kunnes asynkroninen tarkistus valmistuu.
rules={{
validate: async (email) => {
try {
const { available } = await api.checkEmailAvailability(email);
return available || 'This email is already registered';
} catch {
return true; // Allow if check fails — server will catch it later
}
},
}}Virheiden käyttäminen formState-arvosta
formState.errors on sisäkkäinen objekti, jossa kukin avain on kentän nimi ja arvo on virheobjekti, joka sisältää type-arvon (mikä sääntö epäonnistui) ja message-arvon (virhemerkkijonon). Käyttäkää kentän virhettä ilmaisulla errors.fieldName?.message — valinnainen ketjutus estää ajonaikaiset virheet silloin, kun kentällä ei ole virhettä.
const { formState: { errors } } = useForm();
// Accessing errors:
console.log(errors.email?.type); // 'required' | 'pattern' | 'validate'
console.log(errors.email?.message); // 'Email is required'
// Checking if any error exists:
const hasError = !!errors.email;
// Getting error from a named validate:
console.log(errors.username?.type); // 'noSpaces'Syötteiden tyylittäminen virhetilan perusteella
Antakaa käyttäjälle välitön visuaalinen palaute muuttamalla syötteen reunuksen väriä, kun siinä on virhe. Välittäkää virhetila ehdollisena tyylinä tyylien taulukon avulla. Virheellisen kentän punainen reunus ja sen alla oleva punainen virheilmoitus muodostavat selkeän ja tutun käytännön, jonka käyttäjät tunnistavat verkkolomakkeista.
const styles = StyleSheet.create({
input: {
borderWidth: 1,
borderColor: '#ccc',
borderRadius: 8,
padding: 12,
},
inputError: {
borderColor: '#d32f2f',
},
errorText: {
color: '#d32f2f',
fontSize: 12,
marginTop: 4,
},
});
<TextInput style={[styles.input, errors.email && styles.inputError]} />
{errors.email && <Text style={styles.errorText}>{errors.email.message}</Text>}Virheiden näyttöajankohdan hallinta
Oletusarvoisesti virheet näytetään vasta ensimmäisen lähetysyrityksen jälkeen. Sen jälkeen react-hook-form validoi lomakkeen uudelleen reaaliaikaisesti, kun käyttäjä korjaa kenttiä. Voitte muuttaa tätä useForm-funktiolle annettavalla mode-valinnalla. 'onBlur'-tila näyttää virheet heti, kun kenttä menettää kohdistuksen. Näin käyttäjä saa palautetta aiemmin ilman häiritseviä punaisia viestejä kirjoittamisen aikana.
const form = useForm<SignUpForm>({
mode: 'onBlur', // validate on field blur
reValidateMode: 'onChange', // re-validate on every change after first error
defaultValues: { name: '', email: '', password: '' },
});Palvelinpuolen virheet setError-funktiolla
Kun lomake läpäisee asiakaspuolen validoinnin mutta API-kutsu epäonnistuu palvelinvirheen vuoksi — esimerkiksi virheellä 'Sähköpostiosoite on jo käytössä' — lisätkää virhe tiettyyn kenttään setError-funktiolla. Tämä käynnistää kyseisen kentän virhenäytön uudelleen ja antaa käyttäjälle täsmällisen palautteen suorittamatta kaikkia validointisääntöjä uudelleen alusta.
const { setError, handleSubmit } = useForm<RegisterForm>();
async function onSubmit(data: RegisterForm) {
try {
await api.register(data);
navigation.replace('Home');
} catch (err: any) {
if (err.code === 'EMAIL_EXISTS') {
setError('email', {
type: 'server',
message: 'This email is already registered. Please log in.',
});
}
}
}Pikatarkistus
Testatkaa, miten hyvin ymmärrätte tämän oppitunnin React Native Mobile Development -käsitteet.
Oppitunnin yhteenveto
Tässä oppitunnissa opitte, että sisäänrakennetut säännöt (required, minLength, maxLength, pattern, min, max) kattavat useimmat validointitarpeet, validate käsittelee monimutkaiset ja asynkroniset mukautetut tarkistukset ja setError lisää palvelinpuolen virheet tiettyihin kenttiin epäonnistuneen API-kutsun jälkeen. Seuraavaksi perehdymme monivaiheisten lomakkeiden rakentamiseen lomakkeen tilan avulla.
Opi JavaScript tekoälytuutorin avulla — ilmaiseksi
Kirjoita ja suorita oikeaa koodia selaimessa, saa välitöntä apua tekoälytuutorilta ympäri vuorokauden ja jatka siitä, mihin jäit, verkossa tai sovelluksessa.
- Kurssit
- 30
- Oppitunnit
- 120
Usein kysytyt kysymykset
Onko oppitunti ”Validointisäännöt ja virheilmoitukset” ilmainen?
Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa React Native Academy-oppimispolun 3 oppituntia, myös oppitunnin “Validointisäännöt ja virheilmoitukset”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. React Native Academy-kurssilla on yhteensä 4 oppituntia.
Mitä opin oppitunnilla ”Validointisäännöt ja virheilmoitukset”?
Soveltakaa sisäänrakennettuja validointisääntöjä, kuten required, minLength ja pattern, rules-propissa ja renderöikää error-objekti kunkin kentän alapuolelle. Harjoittelet React Native Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.
Tarvitsenko kokemusta aloittaakseni React Native Academy-opiskelun?
Aiempi kokemus ei ole tarpeen. CoddyKitin React Native Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 2/4.
Kuinka kauan ”Validointisäännöt ja virheilmoitukset”-oppitunnin suorittaminen kestää?
Useimmat CoddyKitin oppitunnit kestävät noin 5–10 minuuttia. Jokainen oppitunti on lyhyt ja interaktiivinen, joten edistyt tasaisesti ja voit jatkaa siitä, mihin jäit – sekä verkossa että sovelluksessa.
Voinko kirjoittaa ja suorittaa koodia tällä React Native Academy-oppitunnilla?
Kyllä. Jokainen React Native Academy-oppitunti sisältää sisäänrakennetun koodieditorin, joten voit kirjoittaa ja suorittaa oikeaa koodia suoraan selaimessa ja saada välitöntä palautetta tekoälyltä – paikallista asennusta ei tarvita.
Kaikki tämän kurssin oppitunnit
- react-hook-formin määrittäminen Controller-komponentin kanssa
- Validointisäännöt ja virheilmoitukset
- Monivaiheiset lomakkeet lomakkeen tilan avulla
- Lomakkeiden lähettäminen ja nollaaminen