Android Academy · Oppitunti

Syötteen validointi

Tarkistakaa syöte ja näyttäkää hyödylliset virheilmoitukset.

Oppitunti 3/413 vaihetta

Syötteen validointi on ilmainen Android Academy-oppitunti CoddyKitissä. Tämä on oppitunti 3/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 Android Academy-oppimispolkuun, ja edistymisesi synkronoituu verkon ja CoddyKit-sovelluksen välillä. Android Academy-kurssilla on yhteensä 4 oppituntia.

Miksi syöte tarkistetaan

Käyttäjät tekevät virheitä: nimi voi olla tyhjä, sähköpostiosoite vääränmuotoinen tai salasana liian lyhyt. Hyvät lomakkeet havaitsevat nämä ajoissa ja kertovat selkeästi, mitä pitää korjata.

Tässä oppitunnissa lisäätte Compose-lomakkeisiin tarkistuksen, näytätte virheet kenttien yhteydessä ja poistatte lähetyspainikkeen käytöstä, kunnes kaikki on kelvollista.

Tarkistussääntö on vain funktio

Pitäkää tarkistuslogiikka tavallisina Kotlin-funktioina, jotka ottavat arvon ja palauttavat tiedon sen kelvollisuudesta (tai virheilmoituksen). Näin säännöt ovat uudelleenkäytettäviä ja helposti testattavia.

Tässä on yksinkertainen sähköpostiosoitteen tarkistus.

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

Virheen näyttäminen kentässä

OutlinedTextField-komponentissa on isError-lippu ja supportingText-paikka. Yhdistämällä ne voitte näyttää punaisen kentän ja sen alla olevan viestin.

Virhe tulee suoraan tarkistusfunktiostanne.

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

Älkää varoittako liian aikaisin

”Sähköpostiosoite vaaditaan” -viestin näyttäminen ennen kuin käyttäjä on edes koskenut kenttään tuntuu torjuvalta. Yleinen ratkaisu on seurata, onko kenttään kosketettu, ja näyttää virheet vasta sen jälkeen.

Tässä merkitsemme kentän kosketetuksi, kun se menettää kohdistuksen.

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

Salasanan tarkistaminen

Salasanoihin liittyy yleensä useita sääntöjä. Palauttakaa ensimmäisenä rikkoutuva sääntö, jotta käyttäjä voi korjata yhden asian kerrallaan.

Huomaatte, että kyseessä on edelleen puhdas funktio, joka ei sisällä käyttöliittymää.

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
}

Kenttien välinen tarkistus

Jotkin säännöt koskevat kahta kenttää, kuten ”salasanan vahvistuksen on vastattava salasanaa”. Niitä ei voi sijoittaa yhden kentän funktioon, joten laskekaa ne siellä, missä molemmat arvot ovat saatavilla.

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

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

Lähetyksen estäminen, kunnes tiedot ovat kelvollisia

Koko lomake on kelvollinen, kun kaikki säännöt täyttyvät. Laskekaa yksi totuusarvo ja käyttäkää sitä lähetyspainikkeen ottamiseen käyttöön tai poistamiseen käytöstä.

Näin käyttäjä ei pääse lähettämään virheellisiä tietoja alun perinkään.

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

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

Tarkistaminen lähetettäessä

Kenttien yhteydessä tehtävä tarkistus ohjaa käyttäjää, mutta kaikki kannattaa tarkistaa uudelleen myös lähetyspainiketta painettaessa. Lähetyksen käsittelijä päättää, jatketaanko vai näytetäänkö kaikki virheet kerralla.

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

Kirjoitettavan sisällön rajoittaminen

Tarkistus voi olla myös ennaltaehkäisevää. Puhelinnumeron tapauksessa ohittakaa onValueChange-funktion sisällä merkit, jotka eivät ole numeroita, jotta virheellinen syöte ei koskaan päädy tilaan.

Tämä on käyttäjälle ystävällisempää kuin moittiminen jälkikäteen.

var phone by remember { mutableStateOf("") }

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

Tarkistuksen keskittäminen ViewModeliin

Oikeissa näkymissä pitäkää tarkistus ViewModelissa, jotta käyttöliittymä vain näyttää tulokset. ViewModel tarjoaa virheet ja isValid-lipun.

Näin composable-komponentit pysyvät yksinkertaisina ja säännöt voidaan testata yksikkötesteillä.

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

Puhdas Kotlin: sääntöjen testaaminen

Koska tarkistajat ovat puhtaita funktioita, voitte suorittaa niitä missä tahansa. Tässä sähköpostiosoitteen ja salasanan säännöt suoritetaan itsenäisesti aivan kuten yksikkötesti niitä kutsuisi.

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

Pikatarkistus

Mitä OutlinedTextField-komponentin ominaisuusparia käytetään kentän merkitsemiseen virheelliseksi ja viestin näyttämiseen sen alla?

Vastaa interaktiivisessa oppitunnissa

Kertaus

Osaatte nyt tarkistaa Compose-lomakkeet siististi:

Pitäkää säännöt puhtaina funktioina, jotka palauttavat virheilmoituksen tai null-arvon.
Näyttäkää virheet yhdistämällä isError ja supportingText, älkääkä varoittako ennen kuin kenttään on koskettu.
Käsitelkää kenttien väliset säännöt siellä, missä molemmat arvot ovat näkyvissä.
Poistakaa lähetys käytöstä, kunnes koko lomake on kelvollinen, ja tarkistakaa tiedot uudelleen lähetettäessä.
Estäkää virheellinen syöte filter-funktiolla ja keskittäkää säännöt ViewModeliin.

Seuraavaksi: näppäimistötyypit, IME-toiminnot ja kohdistuksen hallinta.

Aloita maksutta

Opi Kotlin 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: 36
Oppitunnit: 152

Aloita opiskelu maksutta Näytä koko kurssi

Usein kysytyt kysymykset

Onko oppitunti ”Syötteen validointi” ilmainen?

Kyllä — voit lukea täällä verkossa kokonaan ilmaiseksi mitkä tahansa Android Academy-oppimispolun 3 oppituntia, myös oppitunnin “Syötteen validointi”. Sen jälkeen CoddyKit PRO avaa kaikki oppitunnit sekä interaktiiviset harjoitukset sisäänrakennetulla koodieditorilla ja ympäri vuorokauden toimivalla tekoälytuutorilla. Android Academy-kurssilla on yhteensä 4 oppituntia.

Mitä opin oppitunnilla ”Syötteen validointi”?

Tarkistakaa syöte ja näyttäkää hyödylliset virheilmoitukset. Harjoittelet Android Academy-aihetta koodilla, jonka suoritat suoraan selaimessa. Ympäri vuorokauden käytettävissä oleva tekoälytuutori vastaa kysymyksiisi oppitunnin aikana.

Tarvitsenko kokemusta aloittaakseni Android Academy-opiskelun?

Aiempi kokemus ei ole tarpeen. CoddyKitin Android Academy-oppimispolku sopii vasta-alkajista edistyneisiin, joten voit aloittaa tästä tai alusta ja edetä omaan tahtiisi. Tämä on oppitunti 3/4.

Kuinka kauan ”Syötteen validointi”-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ä Android Academy-oppitunnilla?

Kyllä. Jokainen Android 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

← Takaisin: Android Academy