0Pricing
Android Academy · Lekcja

Walidacja danych wejściowych

Sprawdzaj dane wejściowe i wyświetlaj pomocne komunikaty o błędach

Walidacja danych wejściowych to bezpłatna lekcja Android Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Android Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Android Academy zawiera 4 lekcji w sumie.

Dlaczego warto walidować dane wejściowe

Użytkownicy popełniają błędy: pozostawiają puste imię, wpisują niepoprawny adres e-mail lub zbyt krótkie hasło. Dobre formularze wcześnie wykrywają takie problemy i jasno wyjaśniają, co należy poprawić.

W tej lekcji dodadzą Państwo walidację do formularzy Compose, wyświetlanie błędów w polach oraz wyłączanie przycisku wysyłania, dopóki wszystkie dane nie będą poprawne.

Reguła walidacji to po prostu funkcja

Logikę walidacji warto zapisywać jako zwykłe funkcje Kotlina, które przyjmują wartość i zwracają informację, czy jest ona poprawna, lub komunikat o błędzie. Dzięki temu reguły można ponownie wykorzystywać i łatwo testować.

Oto proste sprawdzenie adresu e-mail.

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

Wyświetlanie błędu przy polu

OutlinedTextField udostępnia flagę isError oraz slot supportingText. Można je połączyć, aby wyświetlić czerwone pole z komunikatem poniżej.

Błąd pochodzi bezpośrednio z funkcji walidującej.

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

Nie ostrzegaj zbyt wcześnie

Wyświetlanie komunikatu „Email is required”, zanim użytkownik w ogóle dotknie pola, może sprawiać wrażenie nieprzyjaznego. Często stosowanym rozwiązaniem jest śledzenie, czy pole zostało dotknięte, i wyświetlanie błędów dopiero później.

W tym przykładzie oznaczamy pole jako dotknięte po utracie fokusu.

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

Walidowanie hasła

Hasła zwykle muszą spełniać kilka reguł. Należy zwrócić pierwszą niespełnioną regułę, aby użytkownik poprawiał jedną rzecz naraz.

Zauważ, że nadal jest to czysta funkcja, niezawierająca elementów interfejsu.

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
}

Walidacja zależna od wielu pól

Niektóre reguły dotyczą dwóch pól, na przykład „potwierdzenie hasła musi być zgodne z hasłem”. Nie można umieścić ich w funkcji dotyczącej pojedynczego pola, dlatego należy obliczać je tam, gdzie dostępne są obie wartości.

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

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

Wyłączanie wysyłania do czasu uzyskania poprawnych danych

Cały formularz jest poprawny, gdy wszystkie reguły są spełnione. Należy obliczyć pojedynczą wartość logiczną i użyć jej do włączenia lub wyłączenia przycisku wysyłania.

Zapobiega to wysłaniu niepoprawnych danych przez użytkownika.

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

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

Walidowanie podczas wysyłania

Walidacja bezpośrednio przy polach pomaga użytkownikowi, ale po naciśnięciu przycisku wysyłania należy również ponownie sprawdzić wszystkie dane. Procedura obsługi wysyłania decyduje, czy kontynuować, czy od razu wyświetlić wszystkie błędy.

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

Ograniczanie wpisywanych znaków

Walidacja może również zapobiegać błędom. W przypadku numeru telefonu wystarczy ignorować znaki niebędące cyframi wewnątrz onValueChange, aby niepoprawne dane nigdy nie trafiły do stanu.

To bardziej przyjazne rozwiązanie niż upominanie użytkownika po fakcie.

var phone by remember { mutableStateOf("") }

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

Centralizowanie walidacji w ViewModel

W rzeczywistych ekranach walidację należy przechowywać w ViewModel, aby interfejs tylko wyświetlał wyniki. ViewModel udostępnia błędy oraz flagę isValid.

Dzięki temu komponenty composable pozostają proste, a reguły można testować testami jednostkowymi.

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

Czysty Kotlin: testowanie reguł

Ponieważ walidatory są czystymi funkcjami, można uruchamiać je w dowolnym miejscu. Tutaj reguły dotyczące adresu e-mail i hasła działają samodzielnie, tak jak wywołałby je test jednostkowy.

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

Szybkie sprawdzenie

Która para właściwości elementu OutlinedTextField służy do oznaczenia pola jako niepoprawnego i wyświetlenia pod nim komunikatu?

Podsumowanie

Potrafią już Państwo poprawnie walidować formularze Compose:

  • Reguły należy przechowywać jako czyste funkcje zwracające komunikat o błędzie lub wartość null.
  • Błędy należy wyświetlać za pomocą isError + supportingText i unikać ostrzegania, zanim pole zostanie dotknięte.
  • Reguły zależne od wielu pól należy obsługiwać tam, gdzie widoczne są obie wartości.
  • Należy wyłączyć wysyłanie, dopóki cały formularz nie będzie poprawny, oraz ponownie sprawdzić dane podczas wysyłania.
  • Niepoprawnym danym można zapobiegać za pomocą filter, a reguły centralizować w ViewModel.

Następnie: typy klawiatury, akcje IME i zarządzanie fokusem.

Często zadawane pytania

Czy lekcja „Walidacja danych wejściowych” jest bezpłatna?

Tak — pełny tekst „Walidacja danych wejściowych” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Android Academy, przejdź na CoddyKit PRO. Kurs Android Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Walidacja danych wejściowych”?

Sprawdzaj dane wejściowe i wyświetlaj pomocne komunikaty o błędach Ćwiczysz Android Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Android Academy?

Nie wymagamy żadnego doświadczenia. Android Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Walidacja danych wejściowych”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Android Academy?

Tak. Każda lekcja Android Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

  1. TextField i dane wprowadzane przez użytkownika
  2. Zarządzanie stanem formularza
  3. Walidacja danych wejściowych
  4. Opcje i działania klawiatury
← Powrót do Android Academy