Valideringsregler och felmeddelanden
Tillämpa inbyggda valideringsregler som required, minLength och pattern i egenskapen rules, och rendera felobjektet under varje fält.
Valideringsregler och felmeddelanden är en gratis lektion i React Native Academy på CoddyKit. Detta är lektion 2 av 4. Du kan läsa vilka 3 lektioner som helst i den här lärvägen kostnadsfritt i sin helhet – därefter låser CoddyKit PRO upp alla lektioner, plus praktisk övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Den ingår i lärvägen för React Native Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i React Native Academy innehåller totalt 4 lektioner.
Översikt över inbyggda valideringsregler
react-hook-form innehåller flera inbyggda valideringsregler som täcker de vanligaste kraven utan att du behöver skriva egen kod. De är: required, minLength, maxLength, min (för numeriskt minimivärde), max (för numeriskt maximivärde) och pattern (matchning mot reguljärt uttryck). Varje regel kan ta emot ett enkelt värde eller ett objekt med value och message för ett anpassat felmeddelande.
Regeln required
Regeln required ser till att ett fält inte lämnas tomt. Du kan ange ett booleskt värde true (som använder ett generiskt felmeddelande) eller en sträng (som blir felmeddelandet). För obligatoriska fält i mobilformulär bör du alltid ange ett tydligt meddelande, så att användarna direkt förstår vad som saknas utan att behöva gissa.
// 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' } }}Reglerna minLength och maxLength
Använd minLength för att kräva ett minsta antal tecken och maxLength för att begränsa inmatningens längd. Dessa regler är viktiga för användarnamnsfält (minst 3 tecken), lösenord (minst 8 tecken) och biografifält (högst 200 tecken). Båda reglerna jämför strängens egenskap length med det värde du anger.
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',
},
}}Regeln pattern för validering med reguljära uttryck
Regeln pattern testar fältvärdet mot ett reguljärt uttryck. Använd den för e-postformat, telefonnummer, postnummer eller andra strukturerade textformat. Ange det reguljära uttrycket som egenskapen value. React-hook-form testar hela strängen mot mönstret, så vanligtvis behöver du inte använda ankare.
// 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)',
},
}}Reglerna min och max för tal
För numeriska inmatningsfält – mängder, åldrar och priser – använder du reglerna min och max. De jämför inmatningssträngens numeriska värde, inte dess längd. Ange keyboardType='numeric' på TextInput för att hjälpa användarna att skriva in tal. Kombinera detta med pattern för att säkerställa att endast siffror anges.
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',
},
}}Anpassad validering med validate
Regeln validate tar emot en funktion (eller ett objekt med namngivna funktioner) som får det aktuella fältvärdet och returnerar true om värdet är giltigt eller en sträng med ett felmeddelande om det är ogiltigt. Använd den för komplexa krav som de inbyggda reglerna inte kan uttrycka, till exempel för att bekräfta att lösenord överensstämmer eller kontrollera om ett användarnamn redan är upptaget via ett asynkront API-anrop.
// 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',
},
}}Asynkron validate för kontroller på serversidan
Funktionen validate kan vara async. Det är användbart när du vill kontrollera om ett användarnamn eller en e-postadress redan är upptagen. Funktionen tar emot inmatningsvärdet, gör ett API-anrop och returnerar en felsträng om värdet redan används eller true (eller undefined) om det är tillgängligt. Inmatningen markeras som ogiltig tills den asynkrona kontrollen är klar.
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
}
},
}}Åtkomst till fel från formState
formState.errors är ett nästlat objekt där varje nyckel är ett fältnamn och värdet är ett felobjekt med type (vilken regel som misslyckades) och message (felsträngen). Få åtkomst till ett fälts fel med errors.fieldName?.message – den valfria kedningen förhindrar körtidsfel när fältet inte har något fel.
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'Styla inmatningsfält utifrån felstatus
Ge omedelbar visuell återkoppling genom att ändra inmatningsfältets kantfärg när det innehåller ett fel. Skicka felstatusen som en villkorsstyrd stil i en array med stilar. En röd kant runt det ogiltiga fältet tillsammans med röd feltext under fältet skapar ett tydligt och etablerat mönster som användare känner igen från webbformulär.
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>}Styra när fel visas
Som standard visas fel först efter det första försöket att skicka formuläret. Därefter validerar react-hook-form på nytt i realtid när användaren rättar varje fält. Du kan ändra detta med alternativet mode som skickas till useForm. Läget 'onBlur' visar fel så snart ett fält förlorar fokus, vilket ger tidigare återkoppling utan att distraherande röda meddelanden visas medan användaren fortfarande skriver.
const form = useForm<SignUpForm>({
mode: 'onBlur', // validate on field blur
reValidateMode: 'onChange', // re-validate on every change after first error
defaultValues: { name: '', email: '', password: '' },
});Fel från serversidan med setError
När formuläret har klarat valideringen på klientsidan men API-anropet misslyckas med ett serverfel – till exempel 'E-postadressen finns redan' – använder du setError för att lägga till ett fel i ett specifikt fält. Det visar felet för fältet på nytt och ger användaren exakt återkoppling utan att alla valideringsregler behöver köras om från början.
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.',
});
}
}
}Snabbtest
Testa dina kunskaper om React Native Mobile Development-koncepten från den här lektionen.
Sammanfattning av lektionen
I den här lektionen har du lärt dig följande: inbyggda regler (required, minLength, maxLength, pattern, min, max) täcker de flesta valideringsbehov, validate hanterar komplexa och asynkrona anpassade kontroller, och setError lägger till fel från serversidan i specifika fält efter ett misslyckat API-anrop. Härnäst går vi igenom hur du bygger flerstegsformulär med formulärtillstånd.
Lär dig JavaScript med en AI-lärare – gratis
Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.
- Kurser
- 30
- Lektioner
- 120
Vanliga frågor
Är lektionen ”Valideringsregler och felmeddelanden” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen React Native Academy, inklusive ”Valideringsregler och felmeddelanden”, kostnadsfritt i sin helhet här på webben. Därefter låser CoddyKit PRO upp alla lektioner, plus interaktiv övning med en inbyggd kodredigerare och en AI-lärare dygnet runt. Kursen i React Native Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Valideringsregler och felmeddelanden”?
Tillämpa inbyggda valideringsregler som required, minLength och pattern i egenskapen rules, och rendera felobjektet under varje fält. Ni övar på React Native Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.
Behöver jag någon erfarenhet för att börja lära mig React Native Academy?
Du behöver inga förkunskaper. Utbildningen i React Native Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 2 av 4.
Hur lång tid tar lektionen ”Valideringsregler och felmeddelanden”?
De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.
Kan jag skriva och köra kod i den här React Native Academy-lektionen?
Ja. Varje React Native Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.
Alla lektioner i den här kursen
- Konfigurera react-hook-form med Controller
- Valideringsregler och felmeddelanden
- Flerstegsformulär med formulärtillstånd
- Skicka och återställ formulär