Android Academy · Lektion

Validering af input

Kontrollér input, og vis nyttige fejlmeddelelser.

Lektion 3 af 413 trin

Validering af input er en gratis Android Academy-lektion på CoddyKit. Dette er lektion 3 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i Android Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. Android Academy-kurset indeholder 4 lektioner i alt.

Hvorfor input skal valideres

Brugere begår fejl: et tomt navn, en ugyldig e-mailadresse eller en adgangskode, der er for kort. Gode formularer opdager disse fejl tidligt og forklarer tydeligt, hvad der skal rettes.

I denne lektion tilføjer du validering til Compose-formularer, viser fejl i formularen og deaktiverer send-knappen, indtil alt er gyldigt.

En valideringsregel er blot en funktion

Hold valideringslogikken som almindelige Kotlin-funktioner, der tager en værdi og returnerer, om den er gyldig (eller en fejlmeddelelse). Det gør reglerne genanvendelige og nemme at teste.

Her er et enkelt tjek af en e-mailadresse.

fun emailError(email: String): String? = when {
    email.isBlank() -> "Email is required"
    !email.contains("@") -> "Enter a valid email"
    else -> null
}

Visning af fejlen på feltet

OutlinedTextField har et isError-flag og en supportingText-plads. Kombiner dem for at vise et rødt felt med en meddelelse nedenunder.

Fejlen kommer direkte fra 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) }
)

Råb ikke for tidligt

Det virker uvenligt at vise »E-mailadresse er påkrævet«, før brugeren overhovedet har rørt feltet. En almindelig løsning er at registrere, om et felt er blevet berørt, og først derefter vise fejl.

Her markerer vi feltet som berørt, når det mister 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
    }
)

Validering af en adgangskode

Adgangskoder har som regel flere regler. Returnér den første regel, der fejler, så brugeren kan rette én ting ad gangen.

Bemærk, at dette stadig er en ren funktion uden brugergrænseflade indeni.

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 på tværs af felter

Nogle regler involverer to felter, f.eks. at »bekræft adgangskode« skal matche adgangskoden. Disse regler kan ikke ligge i en funktion for ét enkelt felt, så beregn dem dér, hvor begge værdier er tilgængelige.

var password by remember { mutableStateOf("") }
var confirm by remember { mutableStateOf("") }

val confirmError =
    if (confirm.isNotEmpty() && confirm != password)
        "Passwords don't match"
    else null

Deaktivering af Send, indtil formularen er gyldig

Hele formularen er gyldig, når alle regler er opfyldt. Beregn én boolesk værdi, og brug den til at aktivere eller deaktivere send-knappen.

Det forhindrer, at brugeren sender ugyldige data i første omgang.

val formValid =
    emailError(email) == null &&
    passwordError(password) == null &&
    confirmError == null

Button(onClick = { submit() }, enabled = formValid) {
    Text("Create Account")
}

Validering ved afsendelse

Validering direkte i formularen vejleder brugeren, men du bør også kontrollere alt igen, når brugeren trykker på Send. Håndteringen af afsendelsen afgør, om den skal fortsætte eller vise alle fejl på én gang.

fun onSubmit() {
    val errors = listOfNotNull(
        emailError(email),
        passwordError(password)
    )
    if (errors.isEmpty()) {
        register(email, password)
    } else {
        // show errors / mark fields touched
    }
}

Begrænsning af, hvad der kan indtastes

Validering kan også være forebyggende. For et telefonnummer kan du ganske enkelt ignorere tegn, der ikke er cifre, i onValueChange, så det ugyldige input aldrig kommer ind i tilstanden.

Det er venligere end at skælde brugeren ud bagefter.

var phone by remember { mutableStateOf("") }

OutlinedTextField(
    value = phone,
    onValueChange = { input ->
        phone = input.filter { it.isDigit() }.take(10)
    },
    label = { Text("Phone") }
)

Samling af valideringen i ViewModel

På rigtige skærmbilleder skal du holde valideringen i ViewModel, så brugergrænsefladen kun viser resultaterne. ViewModel viser fejl og et isValid-flag.

Det holder komponerbare funktioner simple og dine regler nemme at teste med enhedstest.

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: Test af reglerne

Fordi validatorer er rene funktioner, kan du køre dem hvor som helst. Her køres e-mail- og adgangskodereglerne selvstændigt, ligesom en enhedstest ville kalde dem.

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"))
}

Hurtigt tjek

Hvilket egenskabspar på OutlinedTextField bruges til at markere et felt som ugyldigt og vise en meddelelse under det?

Besvar den i den interaktive lektion

Opsummering

Du kan nu validere Compose-formularer på en enkel måde:

Hold reglerne som rene funktioner, der returnerer en fejlmeddelelse eller null.
Vis fejl med isError + supportingText, og undgå at råbe, før et felt er blevet berørt.
Håndtér regler på tværs af felter dér, hvor begge værdier er synlige.
Deaktivér Send, indtil hele formularen er gyldig, og kontrollér igen ved afsendelse.
Forebyg ugyldigt input med filter, og saml reglerne i en ViewModel.

Næste trin: Tastaturtyper, IME-handlinger og fokushåndtering.

Gratis at komme i gang

Lær Kotlin med en AI-underviser — gratis

Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.

Kurser: 36
Lektioner: 152

Start gratis Se hele kurset

Ofte stillede spørgsmål

Er lektionen “Validering af input” gratis?

Ja — alle 3 lektioner i læringssporet Android Academy, inklusive “Validering af input”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Android Academy-kurset indeholder 4 lektioner i alt.

Hvad lærer jeg i “Validering af input”?

Kontrollér input, og vis nyttige fejlmeddelelser. Du øver dig i Android Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.

Skal jeg have erfaring for at begynde på Android Academy?

Der kræves ingen tidligere erfaring. Android Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 3 af 4.

Hvor lang tid tager lektionen “Validering af input”?

De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.

Kan jeg skrive og køre kode i denne Android Academy-lektion?

Ja. Alle Android Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.

Alle lektioner i dette kursus

← Tilbage til Android Academy