Android Academy · Урок

Проверка ввода

Проверяйте ввод и показывайте понятные сообщения об ошибках

«Проверка ввода» — бесплатный урок Android Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Android Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Android Academy содержит 4 уроков всего.

Зачем проверять введённые данные

Пользователи ошибаются: могут оставить имя пустым, ввести некорректный адрес электронной почты или слишком короткий пароль. Хорошие формы обнаруживают такие ошибки заранее и понятно объясняют, что нужно исправить.

В этом уроке Вы добавите проверку в формы Compose, научитесь показывать встроенные сообщения об ошибках и отключать кнопку отправки, пока все данные не станут корректными.

Правило проверки — это просто функция

Храните логику проверки в обычных функциях Kotlin, которые принимают значение и возвращают признак его корректности (или сообщение об ошибке). Так правила можно повторно использовать и легко тестировать.

Вот простая проверка адреса электронной почты.

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

Отображение ошибки в поле

У OutlinedTextField есть флаг isError и слот supportingText. Используйте их вместе, чтобы показать поле с красной рамкой и сообщение под ним.

Ошибка поступает непосредственно из функции проверки.

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

Не спешите сообщать об ошибке

Сообщение «Требуется адрес электронной почты» ещё до того, как пользователь успел взаимодействовать с полем, воспринимается недружелюбно. Обычно отслеживают, было ли поле затронуто, и показывают ошибку только после этого.

Здесь мы помечаем поле как затронутое после потери фокуса.

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

Проверка пароля

Для паролей обычно действует несколько правил. Возвращайте первое нарушенное правило, чтобы пользователь исправлял по одной проблеме за раз.

Обратите внимание: это по-прежнему чистая функция, в которой нет интерфейса.

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
}

Проверка нескольких полей

Некоторые правила относятся сразу к двум полям, например «подтверждение пароля должно совпадать с паролем». Такие правила нельзя реализовать в функции для одного поля, поэтому вычисляйте их там, где доступны оба значения.

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

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

Отключение отправки до проверки

Форма считается корректной, когда выполнены все правила. Вычислите одно логическое значение и используйте его, чтобы включать или отключать кнопку отправки.

Так пользователь не сможет изначально отправить некорректные данные.

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

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

Проверка при отправке

Проверка непосредственно в полях помогает пользователю, но при нажатии кнопки отправки следует ещё раз проверить всё. Обработчик отправки решает, продолжать ли операцию или сразу показать все ошибки.

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

Ограничение вводимых данных

Проверка может быть и профилактической. Для номера телефона просто игнорируйте символы, не являющиеся цифрами, внутри onValueChange, чтобы некорректные данные вообще не попадали в состояние.

Это дружелюбнее, чем отчитывать пользователя после ввода.

var phone by remember { mutableStateOf("") }

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

Централизация проверки во ViewModel

На полноценных экранах храните проверку во ViewModel, чтобы интерфейс только отображал результаты. ViewModel предоставляет ошибки и флаг isValid.

Так компонуемые функции остаются простыми, а правила можно тестировать отдельно.

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

Чистый Kotlin: тестирование правил

Поскольку валидаторы являются чистыми функциями, их можно запускать где угодно. Здесь правила для адреса электронной почты и пароля выполняются отдельно, так же как их вызвал бы модульный тест.

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

Быстрая проверка

Какая пара свойств OutlinedTextField используется, чтобы пометить поле как некорректное и показать под ним сообщение?

Итоги

Теперь Вы умеете аккуратно проверять формы Compose:

Храните правила в виде чистых функций, возвращающих сообщение об ошибке или null.
Показывайте ошибки с помощью isError и supportingText, не сообщая об ошибке до взаимодействия с полем.
Обрабатывайте правила для нескольких полей там, где видны оба значения.
Отключайте отправку, пока вся форма не станет корректной, и повторно проверяйте данные при отправке.
Предотвращайте некорректный ввод с помощью filter и централизуйте правила во ViewModel.

Далее: типы клавиатуры, действия IME и управление фокусом.

Часто задаваемые вопросы

Урок «Проверка ввода» бесплатный?

Да — полный текст урока «Проверка ввода» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Android Academy, подпишись на CoddyKit PRO. Курс Android Academy содержит 4 уроков всего.

Чему я научусь в уроке «Проверка ввода»?

Проверяйте ввод и показывайте понятные сообщения об ошибках Ты практикуешь Android Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать Android Academy?

Предыдущий опыт не требуется. Android Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.

Сколько времени занимает урок «Проверка ввода»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке Android Academy?

Да. Каждый урок Android Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к Android Academy