คุณสามารถตรวจสอบอินพุตขณะที่ผู้ใช้พิมพ์ในช่องข้อความ เช่น ป้อนชื่อ อีเมล ที่อยู่ หรือข้อมูลติดต่ออื่นๆ ซึ่งการยืนยันนี้ช่วยลดข้อผิดพลาดและช่วยประหยัดเวลาของผู้ใช้
ความเข้ากันได้ของเวอร์ชัน
การใช้งานนี้กำหนดให้โปรเจ็กต์ของคุณตั้งค่า minSDK เป็น API ระดับ 21 ขึ้นไป
ทรัพยากร Dependency
ตรวจสอบอินพุตขณะที่ผู้ใช้พิมพ์
ใช้โค้ดต่อไปนี้เพื่อแสดงอินพุตของช่องและตรวจสอบข้อความขณะที่ผู้ใช้พิมพ์ หากข้อมูลไม่ถูกต้อง ข้อความแสดงข้อผิดพลาดจะช่วยผู้ใช้แก้ไขข้อมูลที่ป้อน
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
เป็นจริง UI จะมีตัวบ่งชี้ภาพสถานะข้อผิดพลาดในการตรวจสอบ - คอมโพเนนต์จะแสดงข้อความ "รูปแบบอีเมลไม่ถูกต้อง" จนกว่าจะมีการป้อนอีเมลที่ถูกต้องและสมบูรณ์
ผลลัพธ์


คอลเล็กชันที่มีคู่มือนี้
คู่มือนี้เป็นส่วนหนึ่งของคอลเล็กชันคู่มือฉบับย่อที่มีการดูแลจัดการซึ่งครอบคลุมเป้าหมายการพัฒนา Android ที่กว้างขึ้น ดังนี้

ข้อความที่แสดง
ข้อความเป็นส่วนสําคัญของ UI ดูวิธีต่างๆ ที่คุณสามารถนำเสนอข้อความในแอปเพื่อให้ผู้ใช้ได้รับประสบการณ์การใช้งานที่น่าพึงพอใจ

ขอข้อมูลจากผู้ใช้
ดูวิธีใช้วิธีที่ผู้ใช้โต้ตอบกับแอปของคุณโดยการป้อนข้อความและใช้วิธีป้อนข้อมูลอื่นๆ
หากมีคำถามหรือความคิดเห็น
ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ