Eingaben während der Eingabe validieren

Sie können die Eingabe validieren, während der Nutzer Text in ein Textfeld eingibt, z. B. einen Namen, eine E-Mail-Adresse, eine Adresse oder andere Kontaktdaten. Durch diese Validierung werden Fehler reduziert und Ihre Nutzer sparen Zeit.

Ergebnisse

Eine gültige Texteingabe
Abbildung 1: Ein Texteingabefeld mit E-Mail-Validatoren, in dem für eine gültige E-Mail-Adresse keine Fehlermeldungen angezeigt werden.
Eine ungültige Texteingabe mit Fehlern
Abbildung 2. Ein Texteingabefeld, in dem eine Fehlermeldung angezeigt wird, wenn eine ungültige E‑Mail-Adresse eingegeben wird.

Versionskompatibilität

Für diese Implementierung muss das minSDK Ihres Projekts auf API-Level 21 oder höher festgelegt sein.

Abhängigkeiten

Eingabe während der Eingabe durch den Nutzer validieren

Mit dem folgenden Code wird die Feldeingabe angezeigt und der Text validiert, während der Nutzer tippt. Wenn die Informationen nicht validiert werden, kann der Nutzer die Eingabe mithilfe einer Fehlermeldung korrigieren.

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

Wichtige Punkte zum Code

  • Definiert eine zusammensetzbare Funktion, die die Komponente OutlinedTextField wiederverwendet und die erforderlichen Parameter hinzufügt, um Validierungsfehlermeldungen während der Eingabe durch den Nutzer anzuzeigen.
  • EmailViewModel wird verwendet, um den Status beizubehalten und die Logik für die E‑Mail-Validierung bereitzustellen.
  • Wenn isError auf „true“ gesetzt ist, wird in der Benutzeroberfläche ein visueller Hinweis auf einen Validierungsfehlerstatus angezeigt.
  • Die Komponente zeigt „Falsches E‑Mail-Format“ an, bis eine vollständige, korrekte E‑Mail-Adresse eingegeben wird.

Sammlungen, die diesen Leitfaden enthalten

Dieser Leitfaden ist Teil der folgenden Kurzanleitungen, die umfassendere Ziele der Android-Entwicklung abdecken:

Text ist ein zentraler Bestandteil jeder Benutzeroberfläche. Hier finden Sie verschiedene Möglichkeiten, Text in Ihrer App zu präsentieren, um eine ansprechende Nutzererfahrung zu bieten.
Hier erfahren Sie, wie Sie Nutzern die Möglichkeit geben, mit Ihrer App zu interagieren, indem sie Text eingeben und andere Eingabemethoden verwenden.

Fragen oder Feedback

Auf unserer Seite mit häufig gestellten Fragen finden Sie Kurzanleitungen. Sie können sich aber auch gern an uns wenden und uns Ihre Meinung mitteilen.