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

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

결과

유효한 텍스트 입력 — **그림 1.** 유효한 이메일 주소에 오류 메시지가 표시되지 않는 이메일 유효성 검사기가 있는 텍스트 입력 필드

오류가 있는 잘못된 텍스트 입력 — **그림 2.** 잘못된 이메일 주소가 입력되면 오류 메시지를 표시하는 텍스트 입력 필드

버전 호환성

이 구현에서는 프로젝트 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
    )
}TextSnippets.kt

코드에 관한 핵심 사항

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