Convalida l'input mentre l'utente digita

Puoi convalidare l'input mentre l'utente digita in un campo di testo, ad esempio inserendo un nome, un'email, un indirizzo o altri dati di contatto. Questa convalida riduce gli errori e fa risparmiare tempo agli utenti.

Compatibilità delle versioni

Questa implementazione richiede che il valore minSDK del progetto sia impostato sul livello API 21 o superiore.

Dipendenze

Convalida l'input mentre l'utente digita

Utilizza il seguente codice per visualizzare l'input del campo e convalidare il testo mentre l'utente digita. Se le informazioni non sono convalidate, un messaggio di errore aiuta l'utente a correggere l'input.

class EmailViewModel : ViewModel() {
    var email by mutableStateOf("")
        private set

    val emailHasErrors by derivedStateOf {
        if (email.isNotEmpty()) {
            // Email is considered erroneous until it completely matches EMAIL_ADDRESS.
            !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()
        } else {
            false
        }
    }

    fun updateEmail(input: String) {
        email = input
    }
}

@Composable
fun ValidatingInputTextField(
    email: String,
    updateState: (String) -> Unit,
    validatorHasErrors: Boolean
) {
    OutlinedTextField(
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp),
        value = email,
        onValueChange = updateState,
        label = { Text("Email") },
        isError = validatorHasErrors,
        supportingText = {
            if (validatorHasErrors) {
                Text("Incorrect email format.")
            }
        }
    )
}

@Preview
@Composable
fun ValidateInput() {
    val emailViewModel: EmailViewModel = viewModel<EmailViewModel>()
    ValidatingInputTextField(
        email = emailViewModel.email,
        updateState = { input -> emailViewModel.updateEmail(input) },
        validatorHasErrors = emailViewModel.emailHasErrors
    )
}
TextSnippets.kt

Punti chiave del codice

  • Definisce un composable che riutilizza il componente OutlinedTextField, aggiungendo i parametri necessari per visualizzare i messaggi di errore del validatore come tipi di utente.
  • EmailViewModel viene utilizzato per mantenere lo stato e fornire la logica di convalida dell'email.
  • Se isError è true, l'interfaccia utente fornisce un indicatore visivo di uno stato di errore di convalida.
  • Il componente mostrerà il messaggio "Formato email errato" finché non viene inserita un'email completa e corretta.

Risultati

Un input di testo valido
Figura 1. Un campo di immissione di testo con convalidatori email che non mostra messaggi di errore per un indirizzo email valido.
Un input di testo non valido con errori
Figura 2. Un campo di immissione di testo che mostra un messaggio di errore quando viene inserito un indirizzo email non valido.

Raccolte che contengono questa guida

Questa guida fa parte di queste raccolte di guide rapide selezionate che coprono obiettivi di sviluppo Android più ampi:

Testo visualizzato

Il testo è un elemento centrale di qualsiasi interfaccia utente. Scopri diversi modi per presentare il testo nella tua app in modo da offrire un'esperienza utente piacevole.
Collezione di guide rapide
Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri metodi di inserimento.
Collezione di guide rapide

Domande o feedback

Visita la nostra pagina delle domande frequenti e scopri le guide rapide o contattaci per farci sapere cosa ne pensi.
Vai alle domande frequenti Lascia un feedback