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

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

ผลลัพธ์

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

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

การติดตั้งใช้งานนี้กำหนดให้ตั้งค่า 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 ที่กว้างขึ้น

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

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

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