사용자가 이름, 이메일, 주소 또는 기타 연락처 정보를 입력할 때 텍스트 필드에 입력하는 대로 입력을 검사할 수 있습니다. 이 유효성 검사를 통해 오류가 줄고 사용자가 시간을 절약할 수 있습니다.
버전 호환성
이 구현을 사용하려면 프로젝트 minSDK를 API 수준 21 이상으로 설정해야 합니다.
종속 항목
사용자가 입력할 때 입력값 검증
다음 코드를 사용하여 필드 입력을 표시하고 사용자가 입력하는 동안 텍스트를 검사합니다. 정보가 유효하지 않은 경우 오류 메시지를 통해 사용자가 입력을 수정할 수 있습니다.
classEmailViewModel:ViewModel(){varemailbymutableStateOf("")privatesetvalemailHasErrorsbyderivedStateOf{if(email.isNotEmpty()){// Email is considered erroneous until it completely matches EMAIL_ADDRESS.!android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()}else{false}}funupdateEmail(input:String){email=input}}@ComposablefunValidatingInputTextField(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@ComposablefunValidateInput(){valemailViewModel:EmailViewModel=viewModel<EmailViewModel>()ValidatingInputTextField(email=emailViewModel.email,updateState={input->emailViewModel.updateEmail(input)},validatorHasErrors=emailViewModel.emailHasErrors)}
이 페이지에 나와 있는 콘텐츠와 코드 샘플에는 콘텐츠 라이선스에서 설명하는 라이선스가 적용됩니다. 자바 및 OpenJDK는 Oracle 및 Oracle 계열사의 상표 또는 등록 상표입니다.
최종 업데이트: 2025-02-22(UTC)
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2025-02-22(UTC)"],[],[],null,["# Validate input as the user types\n\n\u003cbr /\u003e\n\nYou can validate input as the user types in a text field, such as entering a\nname, email, address, or other contact information. This validation reduces\nerrors and saves your users time.\n\nVersion compatibility\n---------------------\n\nThis implementation requires that your project minSDK be set to API level 21 or\nhigher.\n\n### Dependencies\n\n### Kotlin\n\n\u003cbr /\u003e\n\n```kotlin\n implementation(platform(\"androidx.compose:compose-bom:2025.08.00\"))\n \n```\n\n\u003cbr /\u003e\n\n### Groovy\n\n\u003cbr /\u003e\n\n```groovy\n implementation platform('androidx.compose:compose-bom:2025.08.00')\n \n```\n\n\u003cbr /\u003e\n\nValidate input as the user types\n--------------------------------\n\nUse the following code to display the field input and validate the text while\nthe user types. If the information is not validated, an error message helps the\nuser correct the input.\n\n\n```kotlin\nclass EmailViewModel : ViewModel() {\n var email by mutableStateOf(\"\")\n private set\n\n val emailHasErrors by derivedStateOf {\n if (email.isNotEmpty()) {\n // Email is considered erroneous until it completely matches EMAIL_ADDRESS.\n !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()\n } else {\n false\n }\n }\n\n fun updateEmail(input: String) {\n email = input\n }\n}\n\n@Composable\nfun ValidatingInputTextField(\n email: String,\n updateState: (String) -\u003e Unit,\n validatorHasErrors: Boolean\n) {\n OutlinedTextField(\n modifier = Modifier\n .fillMaxWidth()\n .padding(10.dp),\n value = email,\n onValueChange = updateState,\n label = { Text(\"Email\") },\n isError = validatorHasErrors,\n supportingText = {\n if (validatorHasErrors) {\n Text(\"Incorrect email format.\")\n }\n }\n )\n}\n\n@Preview\n@Composable\nfun ValidateInput() {\n val emailViewModel: EmailViewModel = viewModel\u003cEmailViewModel\u003e()\n ValidatingInputTextField(\n email = emailViewModel.email,\n updateState = { input -\u003e emailViewModel.updateEmail(input) },\n validatorHasErrors = emailViewModel.emailHasErrors\n )\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/text/TextSnippets.kt#L913-L962\n```\n\n\u003cbr /\u003e\n\n### Key points about the code\n\n- Defines a composable that reuses the [`OutlinedTextField`](/reference/kotlin/androidx/compose/material/package-summary#TextField(kotlin.String,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,kotlin.Boolean,androidx.compose.ui.text.TextStyle,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Function0,kotlin.Boolean,androidx.compose.ui.text.input.VisualTransformation,androidx.compose.foundation.text.KeyboardOptions,androidx.compose.foundation.text.KeyboardActions,kotlin.Boolean,kotlin.Int,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.compose.material.TextFieldColors)) component, adding the required parameters to display validator error messages as user types.\n- `EmailViewModel` is used to maintain state and provide the email validation logic.\n- if `isError` is true, the UI provides a visual indicator of a validation error state.\n- The component will display \"Incorrect email format.\" until a complete, correct email is input.\n\nResults\n-------\n\n**Figure 1.** A text input field with email validators displaying no error messages for a valid email address. **Figure 2.** A text input field displaying an error message when an invalid email address is entered.\n\nCollections that contain this guide\n-----------------------------------\n\nThis guide is part of these curated Quick Guide collections that cover\nbroader Android development goals: \n\n### Display text\n\nText is a central piece of any UI. Find out different ways you can present text in your app to provide a delightful user experience. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/display-text) \n\n### Request user input\n\nLearn how to implement ways for users to interact with your app by entering text and using other means of input. \n[Quick guide collection](/develop/ui/compose/quick-guides/collections/request-user-input) \n\nHave questions or feedback\n--------------------------\n\nGo to our frequently asked questions page and learn about quick guides or reach out and let us know your thoughts. \n[Go to FAQ](/quick-guides/faq) [Leave feedback](https://issuetracker.google.com/issues/new?component=1573691&template=1993320)"]]