Sprawdzanie danych wejściowych podczas wpisywania przez użytkownika

Możesz sprawdzać dane wprowadzane przez użytkownika w polu tekstowym, np. imię i nazwisko, adres e-mail, adres lub inne dane kontaktowe. Ta weryfikacja zmniejsza liczbę błędów i oszczędza czas użytkowników.

Zgodność wersji

Ta implementacja wymaga, aby minimalna wersja pakietu SDK projektu była ustawiona na poziom API 21 lub wyższy.

Zależności

Sprawdzanie danych wejściowych podczas wpisywania przez użytkownika

Użyj tego kodu, aby wyświetlić dane wejściowe w polu i sprawdzać tekst podczas wpisywania przez użytkownika. Jeśli informacje nie zostaną zweryfikowane, użytkownik otrzyma komunikat o błędzie, który pomoże mu poprawić dane wejściowe.

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

Najważniejsze informacje o kodzie

  • Definiuje komponent, który ponownie używa komponentu OutlinedTextField, dodając wymagane parametry, aby wyświetlać komunikaty o błędach mechanizmu weryfikacji jako typy użytkowników.
  • EmailViewModel służy do zachowania stanu i zapewniania logiki sprawdzania adresów e-mail.
  • Jeśli isError ma wartość Prawda, interfejs wyświetla wizualny wskaźnik stanu błędu weryfikacji.
  • Dopóki nie zostanie podany prawidłowy adres e-mail, komponent będzie wyświetlać komunikat „Nieprawidłowy format adresu e-mail”.

Wyniki

prawidłowy tekst;
Rysunek 1. Pole tekstowe z sprawdzaczem adresów e-mail, które nie wyświetla komunikatów o błędach w przypadku prawidłowego adresu e-mail.
Nieprawidłowy tekst z błędami
Rysunek 2. Pole tekstowe z komunikatem o błędzie, który pojawia się po wpisaniu nieprawidłowego adresu e-mail.

Kolekcje zawierające ten przewodnik

Ten przewodnik należy do tych kolekcji krótkich przewodników, które obejmują szersze zagadnienia związane z tworzeniem aplikacji na Androida:

Tekst jest centralnym elementem każdego interfejsu użytkownika. Dowiedz się, jak możesz wyświetlać tekst w aplikacji, aby zapewnić użytkownikom przyjemne wrażenia.
Dowiedz się, jak wdrożyć sposoby interakcji użytkowników z aplikacją przez wpisywanie tekstu i używanie innych metod wprowadzania danych.

Masz pytania lub chcesz przekazać opinię?

Otwórz stronę z najczęstszymi pytaniami i poznaj krótkie przewodniki lub skontaktuj się z nami i powiedz nam, co o tym myślisz.