사용자가 입력할 때 입력값 검증

사용자가 이름, 이메일, 주소 또는 기타 연락처 정보를 입력할 때 텍스트 필드에 입력하는 대로 입력을 검사할 수 있습니다. 이 유효성 검사를 통해 오류가 줄고 사용자가 시간을 절약할 수 있습니다.

버전 호환성

이 구현을 사용하려면 프로젝트 minSDK를 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
    )
}

코드 관련 핵심 사항

  • OutlinedTextField 구성요소를 재사용하는 컴포저블을 정의하여 검사기 오류 메시지를 사용자 유형으로 표시하는 필수 매개변수를 추가합니다.
  • EmailViewModel는 상태를 유지하고 이메일 유효성 검사 로직을 제공하는 데 사용됩니다.
  • isError이 true인 경우 UI는 유효성 검사 오류 상태의 시각적 표시기를 제공합니다.
  • 올바르고 완전한 이메일이 입력될 때까지 구성요소에 '이메일 형식이 잘못됨'이라고 표시됩니다.

결과

유효한 텍스트 입력
그림 1. 유효한 이메일 주소에 대한 오류 메시지를 표시하지 않는 이메일 검사기가 있는 텍스트 입력란
오류가 있는 잘못된 텍스트 입력
그림 2. 잘못된 이메일 주소를 입력하면 오류 메시지가 표시되는 텍스트 입력란

이 가이드가 포함된 컬렉션

이 가이드는 더 광범위한 Android 개발 목표를 다루는 선별된 빠른 가이드 모음의 일부입니다.

텍스트는 모든 UI의 핵심 요소입니다. 만족도 높은 사용자 환경을 제공하기 위해 앱에서 텍스트를 표시하는 다양한 방법을 알아보세요.
사용자가 텍스트를 입력하고 다른 입력 수단을 사용하여 앱과 상호작용할 수 있는 방법을 구현하는 방법을 알아봅니다.

질문이나 의견이 있으신가요?

자주 묻는 질문(FAQ) 페이지로 이동하여 빠른 가이드를 알아보거나 문의하여 의견을 보내주세요.