Проверяйте ввод по мере ввода пользователем

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

Результаты

Совместимость версий

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

Зависимости

Проверяйте вводимые данные по мере того, как пользователь набирает текст.

Используйте следующий код для отображения поля ввода и проверки текста во время ввода пользователем. Если информация не проверена, отобразится сообщение об ошибке, которое поможет пользователю исправить ввод.

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

Основные моменты, касающиеся кода.

• Определяет составной компонент, который повторно использует компонент OutlinedTextField , добавляя необходимые параметры для отображения сообщений об ошибках валидатора по мере ввода пользователем текста.
• EmailViewModel используется для поддержания состояния и реализации логики проверки адреса электронной почты.
• Если isError равно true, пользовательский интерфейс отображает визуальный индикатор ошибки проверки.
• Компонент будет отображать сообщение «Неверный формат электронного письма» до тех пор, пока не будет введен полный и корректный адрес электронной почты.

Коллекции, содержащие это руководство

Данное руководство является частью подборки кратких руководств, охватывающих более широкие цели разработки под Android:

Отобразить текст

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

Краткий справочник

Запросить ввод данных от пользователя

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

Краткий справочник

Есть вопросы или отзывы?

Перейдите на страницу часто задаваемых вопросов и ознакомьтесь с краткими руководствами или свяжитесь с нами и поделитесь своими мыслями.

Перейти к разделу часто задаваемых вопросов Оставить отзыв