Android Academy · Lezione

Convalidare l'input

Controlli l'input e mostri messaggi di errore utili

Convalidare l'input è una lezione Android Academy gratuita su CoddyKit. Questa è la lezione 3 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Android Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Android Academy include 4 lezioni in totale.

Perché convalidare gli input

Gli utenti commettono errori: un nome vuoto, un indirizzo email non valido, una password troppo breve. I moduli ben progettati intercettano subito questi problemi e spiegano chiaramente come correggerli.

In questa lezione aggiungerà la convalida ai moduli Compose, mostrerà gli errori direttamente nei campi e disabiliterà il pulsante di invio finché tutto non sarà valido.

Una regola di convalida è solo una funzione

Mantenga la logica di convalida in semplici funzioni Kotlin che ricevono un valore e restituiscono se è valido (oppure un messaggio di errore). In questo modo le regole sono riutilizzabili e facili da testare.

Ecco un semplice controllo per un indirizzo email.

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

Mostrare l'errore nel campo

OutlinedTextField dispone del flag isError e dello slot supportingText. Li combini per mostrare un campo rosso con un messaggio sottostante.

L'errore proviene direttamente dalla funzione di convalida.

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

Non segnali l'errore troppo presto

Mostrare "L'email è obbligatoria" prima ancora che l'utente abbia toccato il campo può risultare ostile. Una soluzione comune consiste nel tenere traccia del fatto che un campo sia stato toccato e mostrare gli errori solo dopo.

Qui contrassegniamo il campo come toccato quando perde il focus.

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

Convalidare una password

Le password hanno generalmente diverse regole. Restituisca la prima regola non rispettata, così l'utente può correggere un problema alla volta.

Noti che si tratta ancora di una funzione pura, senza elementi dell'interfaccia al suo interno.

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
}

Convalida tra più campi

Alcune regole coinvolgono due campi, ad esempio "la conferma della password deve corrispondere alla password". Queste regole non possono risiedere in una funzione che gestisce un solo campo, quindi le calcoli dove entrambi i valori sono disponibili.

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

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

Disabilitare l'invio finché il modulo non è valido

L'intero modulo è valido quando tutte le regole sono rispettate. Calcoli un singolo valore booleano e lo usi per abilitare o disabilitare il pulsante di invio.

In questo modo impedisce all'utente di inviare dati non validi fin dall'inizio.

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

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

Convalidare al momento dell'invio

La convalida in linea guida l'utente, ma dovrebbe anche ricontrollare tutto quando preme il pulsante di invio. Il gestore dell'invio decide se procedere oppure mostrare tutti gli errori contemporaneamente.

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

Limitare ciò che può essere digitato

La convalida può anche essere preventiva. Per un numero di telefono, ignori semplicemente i caratteri non numerici all'interno di onValueChange, così l'input errato non entra mai nello stato.

È più semplice per l'utente rispetto a rimproverarlo in seguito.

var phone by remember { mutableStateOf("") }

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

Centralizzare la convalida nel ViewModel

Nelle schermate reali, mantenga la convalida nel ViewModel, in modo che l'interfaccia debba solo visualizzare i risultati. Il ViewModel espone gli errori e un flag isValid.

In questo modo i composable rimangono semplici e le regole possono essere testate con unit test.

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

Kotlin puro: testare le regole

Poiché i validatori sono funzioni pure, può eseguirli ovunque. Qui le regole per email e password vengono eseguite indipendentemente, proprio come verrebbero chiamate da un unit test.

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

Verifica rapida

Quale coppia di proprietà di OutlinedTextField viene usata per indicare che un campo non è valido e mostrare un messaggio sotto di esso?

Riepilogo

Ora sa convalidare in modo ordinato i moduli Compose:

Mantenga le regole come funzioni pure che restituiscono un messaggio di errore oppure null.
Mostri gli errori con isError + supportingText ed eviti di segnalarli prima che il campo sia stato toccato.
Gestisca le regole tra più campi nel punto in cui entrambi i valori sono visibili.
Disabiliti l'invio finché l'intero modulo non è valido e ricontrolli tutto al momento dell'invio.
Prevenga gli input errati con filter e centralizzi le regole in un ViewModel.

Prossimo argomento: tipi di tastiera, azioni IME e gestione del focus.

Domande Frequenti

La lezione «Convalidare l'input» è gratuita?

Sì — il testo completo di «Convalidare l'input» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Android Academy, passa a CoddyKit PRO. Il corso Android Academy include 4 lezioni in totale.

Cosa imparerò in «Convalidare l'input»?

Controlli l'input e mostri messaggi di errore utili Eserciti Android Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Android Academy?

Non è richiesta alcuna esperienza precedente. Android Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 4.

Quanto tempo richiede la lezione «Convalidare l'input»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Android Academy?

Sì. Ogni lezione Android Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Android Academy