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.

Risultati

Un input di testo valido
Figura 1. Un campo di immissione di testo con validatori email che non mostrano 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.

Compatibilità delle versioni

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

Dipendenze

Convalida l'input man mano che 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 vengono 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 sul codice

  • Definisce un composable che riutilizza il componente OutlinedTextField, aggiungendo i parametri richiesti per visualizzare i messaggi di errore dello strumento di convalida durante la digitazione dell'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 visualizzerà il messaggio "Formato email errato" finché non viene inserita un'email completa e corretta.

Raccolte che contengono questa guida

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

Testo visualizzato

Il testo è un elemento centrale di qualsiasi UI. Scopri diversi modi per presentare il testo nella tua app e offrire un'esperienza utente piacevole.
Raccolta di guide rapide
Scopri come implementare modi per consentire agli utenti di interagire con la tua app inserendo testo e utilizzando altri mezzi di input.
Raccolta di guide rapide

Hai domande o feedback

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