Validera inmatning
Kontrollera inmatning och visa hjälpsamma felmeddelanden.
Validera inmatning är en gratis lektion i Android Academy på CoddyKit. Detta är lektion 3 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 Android Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i Android Academy innehåller totalt 4 lektioner.
Varför validera inmatning
Användare gör misstag: ett tomt namn, en felaktigt formaterad e-postadress eller ett för kort lösenord. Bra formulär upptäcker detta tidigt och förklarar tydligt vad som behöver åtgärdas.
I den här lektionen lägger du till validering i Compose-formulär, visar felmeddelanden direkt i formuläret och inaktiverar skicka-knappen tills allt är giltigt.
En valideringsregel är bara en funktion
Håll valideringslogiken som vanliga Kotlin-funktioner som tar emot ett värde och returnerar om det är giltigt (eller ett felmeddelande). Då blir reglerna återanvändbara och enkla att testa.
Här är en enkel kontroll av en e-postadress.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}Visa felet i fältet
OutlinedTextField har flaggan isError och en plats för supportingText. Kombinera dem för att visa ett rött fält med ett meddelande under.
Felet kommer direkt från din valideringsfunktion.
var email by remember { mutableStateOf("") }
val error = emailError(email)
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
supportingText = { if (error != null) Text(error) }
)Visa inte fel för tidigt
Att visa "E-postadress krävs" innan användaren ens har rört fältet känns ovänligt. En vanlig lösning är att hålla reda på om ett fält har berörts och först därefter visa fel.
Här markerar vi fältet som berört när det förlorar fokus.
var email by remember { mutableStateOf("") }
var touched by remember { mutableStateOf(false) }
val error = if (touched) emailError(email) else null
OutlinedTextField(
value = email,
onValueChange = { email = it },
label = { Text("Email") },
isError = error != null,
modifier = Modifier.onFocusChanged {
if (!it.isFocused) touched = true
}
)Validera ett lösenord
Lösenord har vanligtvis flera regler. Returnera den första regel som inte uppfylls, så att användaren kan åtgärda en sak i taget.
Lägg märke till att detta fortfarande är en ren funktion utan något UI inuti.
fun passwordError(pw: String): String? = when {
pw.length < 8 -> "At least 8 characters"
pw.none { it.isDigit() } -> "Add a number"
pw.none { it.isUpperCase() } -> "Add an uppercase letter"
else -> null
}Validering mellan fält
Vissa regler involverar två fält, till exempel att "bekräftelsen av lösenordet måste matcha lösenordet". Sådana regler kan inte ligga i en funktion för ett enda fält, utan måste beräknas där båda värdena är tillgängliga.
var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }
val confirmError =
if (confirm.isNotEmpty() && confirm != password)
"Passwords don't match"
else nullInaktivera Skicka tills allt är giltigt
Hela formuläret är giltigt när alla regler är uppfyllda. Beräkna ett enda booleskt värde och använd det för att aktivera eller inaktivera skicka-knappen.
På så sätt förhindrar du att användaren skickar felaktiga uppgifter från början.
val formValid =
emailError(email) == null &&
passwordError(password) == null &&
confirmError == null
Button(onClick = { submit() }, enabled = formValid) {
Text("Create Account")
}Validera vid skickande
Validering direkt i formuläret vägleder användaren, men du bör också kontrollera allt igen när användaren trycker på Skicka. Hanteraren för skickandet avgör om processen ska fortsätta eller om alla fel ska visas samtidigt.
fun onSubmit() {
val errors = listOfNotNull(
emailError(email),
passwordError(password)
)
if (errors.isEmpty()) {
register(email, password)
} else {
// show errors / mark fields touched
}
}Begränsa vad som kan skrivas
Validering kan också vara förebyggande. För ett telefonnummer kan du helt enkelt ignorera tecken som inte är siffror i onValueChange, så att den felaktiga inmatningen aldrig hamnar i tillståndet.
Det är vänligare än att tillrättavisa användaren i efterhand.
var phone by remember { mutableStateOf("") }
OutlinedTextField(
value = phone,
onValueChange = { input ->
phone = input.filter { it.isDigit() }.take(10)
},
label = { Text("Phone") }
)Samla valideringen i ViewModel
För riktiga skärmar bör du hålla valideringen i ViewModel, så att UI:t bara visar resultaten. ViewModel exponerar fel och flaggan isValid.
Det håller composable-funktionerna enkla och gör reglerna möjliga att enhetstesta.
class SignUpViewModel : ViewModel() {
var email by mutableStateOf("")
private set
val emailError: String?
get() = emailError(email)
val isValid: Boolean
get() = emailError == null && email.isNotBlank()
fun onEmailChange(value: String) { email = value }
}Ren Kotlin: testa reglerna
Eftersom validerare är rena funktioner kan du köra dem var som helst. Här körs reglerna för e-postadress och lösenord fristående, precis som i ett enhetstest.
fun emailError(email: String): String? = when {
email.isBlank() -> "Email is required"
!email.contains("@") -> "Enter a valid email"
else -> null
}
fun main() {
println(emailError(""))
println(emailError("nope"))
println(emailError("ada@dev.io"))
}Snabb kontroll
Vilket egenskapspar i OutlinedTextField används för att markera ett fält som ogiltigt och visa ett meddelande under det?
Sammanfattning
Nu kan du validera Compose-formulär på ett tydligt sätt:
- Håll reglerna som rena funktioner som returnerar ett felmeddelande eller null.
- Visa fel med
isError+supportingTextoch undvik att visa fel innan ett fält har berörts. - Hantera regler mellan fält där båda värdena är tillgängliga.
- Inaktivera Skicka tills hela formuläret är giltigt och kontrollera igen vid skickande.
- Förhindra felaktig inmatning med
filteroch samla reglerna i en ViewModel.
Nästa steg: tangentbordstyper, IME-åtgärder och fokushantering.
Lär dig Kotlin 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
- 36
- Lektioner
- 152
Vanliga frågor
Är lektionen ”Validera inmatning” gratis?
Ja – du kan läsa vilka 3 lektioner som helst i lärvägen Android Academy, inklusive ”Validera inmatning”, 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 Android Academy innehåller totalt 4 lektioner.
Vad lär jag mig i ”Validera inmatning”?
Kontrollera inmatning och visa hjälpsamma felmeddelanden. Ni övar på Android 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 Android Academy?
Du behöver inga förkunskaper. Utbildningen i Android 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 3 av 4.
Hur lång tid tar lektionen ”Validera inmatning”?
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 Android Academy-lektionen?
Ja. Varje Android 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
- TextField och användarinmatning
- Hantera formulärtillstånd
- Validera inmatning
- Tangentbordsalternativ och åtgärder