ตรวจสอบอินพุตขณะที่ผู้ใช้พิมพ์

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

ความเข้ากันได้ของเวอร์ชัน

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

ผลลัพธ์

การป้อนข้อความที่ถูกต้อง
รูปที่ 1 ช่องป้อนข้อความที่มีโปรแกรมตรวจสอบอีเมลซึ่งไม่แสดงข้อความแสดงข้อผิดพลาดสำหรับอีเมลที่ถูกต้อง
อินพุตข้อความไม่ถูกต้องที่มีข้อผิดพลาด
รูปที่ 2 ช่องป้อนข้อความที่แสดงข้อความแสดงข้อผิดพลาดเมื่อป้อนอีเมลที่ไม่ถูกต้อง

คอลเล็กชันที่มีคู่มือนี้

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

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

หากมีคำถามหรือความคิดเห็น

ไปที่หน้าคำถามที่พบบ่อยเพื่อดูคู่มือฉบับย่อหรือติดต่อเราเพื่อบอกความคิดเห็นของคุณ