การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด
แสดงผลตอบกลับทันทีเมื่ออินพุตไม่ถูกต้อง
การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด เป็นบทเรียน Jetpack Compose Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Jetpack Compose Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
จัดการข้อผิดพลาดตั้งแต่เนิ่น ๆ
แบบฟอร์มที่ดีจะแก้ปัญหาขณะที่ผู้ใช้กำลังพิมพ์ ไม่ใช่หลังจากผู้ใช้แตะส่ง การตรวจสอบในบรรทัดหมายถึงการแสดงคำแนะนำทันทีและอย่างนุ่มนวล ✅
คำนวณความถูกต้องจากสถานะ
สร้างค่าสถานะ isError โดยตรงจากค่าปัจจุบัน เมื่อที่อยู่อีเมลดูไม่ถูกต้อง ค่าสถานะนี้จะเปลี่ยนเป็นจริง
val isError = email.isNotEmpty() && !email.contains("@")พารามิเตอร์ isError
ส่งค่าสถานะนั้นไปยังพารามิเตอร์ isError ของช่อง จากนั้น Compose จะเปลี่ยนสีเส้นขอบและป้ายกำกับเป็นสีแดงเพื่อแจ้งปัญหา
OutlinedTextField(
value = email,
onValueChange = { email = it },
isError = isError
)อธิบายปัญหา
เส้นขอบสีแดงเพียงอย่างเดียวอาจไม่ชัดเจน ใช้ supportingText เพื่ออธิบายให้แน่ชัดว่าเกิดข้อผิดพลาดอะไรขึ้น เพื่อให้ผู้ใช้แก้ไขได้
supportingText = {
if (isError) Text("Enter a valid email.")
}แสดงข้อผิดพลาดในเวลาที่เหมาะสม
อย่าแจ้งเตือนเมื่อช่องยังว่าง ให้ตรวจสอบหลังจากผู้ใช้เริ่มพิมพ์แล้วเท่านั้น เพื่อให้ข้อผิดพลาดปรากฏเมื่อ มีประโยชน์จริง ๆ
เพิ่มไอคอนข้อผิดพลาด
trailingIcon ช่วยเน้นข้อความให้ชัดเจนขึ้น ให้เปลี่ยนเป็นไอคอนเตือนเมื่อช่องอยู่ในสถานะผิดพลาด
trailingIcon = {
if (isError) Icon(Icons.Default.Warning, "Error")
}ตรวจสอบหลายช่อง
แต่ละช่องจะมีค่าสถานะของตนเอง นำค่าสถานะเหล่านั้นมารวมกันเพื่อดูว่า แบบฟอร์มทั้งหมดถูกต้องและพร้อมส่งหรือไม่
val formValid = emailValid && passwordValidควบคุมปุ่มส่ง
ผูกค่าสถานะ enabled ของปุ่มเข้ากับความถูกต้องของแบบฟอร์ม ผู้ใช้จะส่งไม่ได้จนกว่าทุกช่องจะผ่านการตรวจสอบ
Button(onClick = ::submit, enabled = formValid) {
Text("Sign Up")
}ใช้ข้อความที่เป็นมิตร
เขียนข้อความข้อผิดพลาดที่ ช่วยเหลือผู้ใช้ ไม่ใช่ตำหนิผู้ใช้ ข้อความ “รหัสผ่านสั้นเกินไป” ย่อมดีกว่า “ข้อมูลนำเข้าไม่ถูกต้อง” ในทุกกรณี
การตรวจสอบคือสถานะเท่านั้น
สังเกตรูปแบบนี้ไว้ ข้อผิดพลาดเป็นค่าเรียบง่ายที่ คำนวณจากสถานะ ไม่มีเวทมนตร์ใด ๆ มีเพียงรูปแบบ Compose เดิมที่คุณรู้จัก
แบบฟอร์มจริงสร้างความน่าเชื่อถือ
คำแนะนำที่ชัดเจนและทันเวลาช่วยสร้าง ความไว้วางใจ ผู้ใช้จะรู้สึกว่าได้รับการแนะนำ ไม่ใช่ถูกทดสอบ และกรอกแบบฟอร์มจนเสร็จได้อย่างง่ายดาย
ตรวจสอบความเข้าใจ
คุณจะเปลี่ยนเส้นขอบของช่องข้อความเป็นสีแดงเพื่อแจ้งปัญหาได้อย่างไร
สรุปทบทวน
คุณสร้าง การตรวจสอบในบรรทัดแล้ว โดยสร้างค่าสถานะข้อผิดพลาด ตั้งค่า isError อธิบายปัญหาด้วยข้อความประกอบ และควบคุมการส่งตามความถูกต้องของแบบฟอร์ม แบบฟอร์มจึงใช้งานได้อย่างน่าพอใจ 🌟
คำถามที่พบบ่อย
บทเรียน “การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Jetpack Compose Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Jetpack Compose Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด”
แสดงผลตอบกลับทันทีเมื่ออินพุตไม่ถูกต้อง คุณปฏิบัติ Jetpack Compose Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Jetpack Compose Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Jetpack Compose Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Jetpack Compose Academy นี้ได้ไหม
ได้ บทเรียน Jetpack Compose Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- TextField และ OutlinedTextField
- ป้ายกำกับ ข้อความตัวอย่าง และไอคอนนำหน้า
- ชนิดแป้นพิมพ์และการดำเนินการ IME
- การตรวจสอบในบรรทัดและสถานะข้อผิดพลาด