คุณสามารถตรวจสอบความถูกต้องของข้อมูลที่ป้อนขณะที่ผู้ใช้พิมพ์ในช่องข้อความได้ เช่น การป้อนชื่อ อีเมล ที่อยู่ หรือข้อมูลติดต่ออื่นๆ การตรวจสอบนี้จะช่วยลด ข้อผิดพลาดและประหยัดเวลาให้ผู้ใช้
ผลลัพธ์
ความเข้ากันได้ของเวอร์ชัน
การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า 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 ) }
ประเด็นสำคัญเกี่ยวกับโค้ด
- กำหนด Composable ที่นำคอมโพเนนต์
OutlinedTextFieldมาใช้ซ้ำ โดยเพิ่มพารามิเตอร์ที่จำเป็นเพื่อแสดงข้อความแสดงข้อผิดพลาดของโปรแกรมตรวจสอบขณะที่ผู้ใช้พิมพ์ EmailViewModelใช้เพื่อรักษาสถานะและให้ตรรกะการตรวจสอบอีเมล- หาก
isErrorเป็นจริง UI จะแสดงสัญญาณบ่งชี้ด้วยภาพของสถานะข้อผิดพลาดในการตรวจสอบ - คอมโพเนนต์จะแสดงข้อความ "รูปแบบอีเมลไม่ถูกต้อง" จนกว่าจะมีการป้อนอีเมลที่ถูกต้องและครบถ้วน
คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่คัดสรรมาแล้วซึ่งครอบคลุม เป้าหมายการพัฒนา Android ที่กว้างขึ้น
ข้อความที่แสดง