Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang
Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.
Bạn có thể xác thực dữ liệu đầu vào khi người dùng nhập vào trường văn bản, chẳng hạn như nhập tên, email, địa chỉ hoặc thông tin liên hệ khác. Quy trình xác thực này giúp giảm lỗi và tiết kiệm thời gian cho người dùng.
Khả năng tương thích của phiên bản
Phương thức triển khai này yêu cầu bạn phải đặt minSDK của dự án thành API cấp 21 trở lên.
Phần phụ thuộc
Xác thực dữ liệu đầu vào khi người dùng nhập
Sử dụng mã sau để hiển thị dữ liệu đầu vào của trường và xác thực văn bản trong khi người dùng nhập. Nếu thông tin không được xác thực, một thông báo lỗi sẽ giúp người dùng chỉnh sửa dữ liệu đầu vào.
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)}
Xác định một thành phần kết hợp sử dụng lại thành phần OutlinedTextField, thêm các tham số bắt buộc để hiển thị thông báo lỗi của trình xác thực dưới dạng loại người dùng.
EmailViewModel được dùng để duy trì trạng thái và cung cấp logic xác thực email.
nếu isError là true, giao diện người dùng sẽ cung cấp chỉ báo trực quan về trạng thái lỗi xác thực.
Thành phần này sẽ hiển thị thông báo "Định dạng email không chính xác" cho đến khi bạn nhập một email hoàn chỉnh và chính xác.
Kết quả
Hình 1. Một trường nhập văn bản có trình xác thực email không hiển thị thông báo lỗi cho một địa chỉ email hợp lệ.Hình 2. Một trường nhập văn bản hiển thị thông báo lỗi khi người dùng nhập địa chỉ email không hợp lệ.
Các bộ sưu tập chứa hướng dẫn này
Hướng dẫn này là một phần của các bộ sưu tập Hướng dẫn nhanh được tuyển chọn này, bao gồm các mục tiêu phát triển Android rộng hơn:
Văn bản hiển thị
Văn bản là phần chính của mọi giao diện người dùng. Tìm hiểu các cách khác nhau để bạn có thể trình bày văn bản trong ứng dụng nhằm mang lại trải nghiệm thú vị cho người dùng.
Nội dung và mã mẫu trên trang này phải tuân thủ các giấy phép như mô tả trong phần Giấy phép nội dung. Java và OpenJDK là nhãn hiệu hoặc nhãn hiệu đã đăng ký của Oracle và/hoặc đơn vị liên kết của Oracle.
Cập nhật lần gần đây nhất: 2025-02-22 UTC.
[null,null,["Cập nhật lần gần đây nhất: 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)"]]