การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions
ส่งคืนข้อผิดพลาดจากการตรวจสอบและเติมข้อมูลในช่องแบบฟอร์มอีกครั้งโดยใช้ fail() และ ActionData
การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions เป็นบทเรียน Sveltejs Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Sveltejs Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวช่วย fail
ใช้ fail() เพื่อส่งคืนข้อผิดพลาดในการตรวจสอบข้อมูลพร้อมสถานะที่ไม่ใช่ 2xx โดยไม่ต้องโยนข้อผิดพลาด
import { fail } from "@sveltejs/kit";
if (!email) return fail(400, { email, missing: true });รหัสสถานะ
อาร์กิวเมนต์ตัวแรกคือสถานะ HTTP (โดยทั่วไปใช้ 400 สำหรับการตรวจสอบข้อมูล)
ข้อมูลข้อผิดพลาด
อาร์กิวเมนต์ตัวที่สองคือข้อมูลที่ส่งกลับไปยังหน้า ให้รวมข้อมูลป้อนเข้าของผู้ใช้เพื่อเติมข้อมูลกลับลงในแบบฟอร์ม
อ่านข้อมูลในหน้า
หน้าจะได้รับพร็อพ form ซึ่งมีผลลัพธ์จากการดำเนินการ
<script>
export let form;
</script>
{#if form?.missing}<p>Please enter an email.</p>{/if}เติมข้อมูลในช่องกลับคืน
ส่งค่าที่ส่งมาแล้วกลับผ่าน fail และเติมค่าลงในช่องข้อมูลล่วงหน้า เพื่อไม่ให้ผู้ใช้ต้องพิมพ์ใหม่
<input name="email" value={form?.email ?? ""} />ข้อผิดพลาดระดับช่องข้อมูล
ใช้คีย์ข้อผิดพลาดแยกกันสำหรับแต่ละช่องข้อมูล เพื่อควบคุมส่วนติดต่อผู้ใช้ได้อย่างละเอียด
return fail(400, { errors: { email: "Invalid" } });ใช้ร่วมกับการตรวจสอบด้วยสคีมา
ใช้ไลบรารีอย่าง Zod หรือ Valibot บนเซิร์ฟเวอร์เพื่อแยกวิเคราะห์ข้อมูลอย่างปลอดภัยด้านชนิดข้อมูล
หลีกเลี่ยงการโยนข้อผิดพลาดเพื่อตรวจสอบข้อมูล
การโยนข้อผิดพลาดจะนำไปสู่หน้าแสดงข้อผิดพลาด ส่วน fail จะคงผู้ใช้ไว้ที่แบบฟอร์ม
รีเซ็ตแบบฟอร์มเมื่อสำเร็จ
เมื่อสำเร็จ ให้ล้างสถานะของแบบฟอร์มด้วยการส่งคืนค่าว่างหรือเปลี่ยนเส้นทาง
ใช้ร่วมกับ use:enhance
พร็อพ form จะอัปเดตโดยไม่ต้องโหลดใหม่ เนื่องจาก enhance
การช่วยการเข้าถึง
ประกาศข้อผิดพลาดด้วย aria-live เพื่อให้โปรแกรมอ่านหน้าจออ่านข้อผิดพลาดเหล่านั้น
ตรวจสอบอย่างรวดเร็ว
fail() ส่งคืนอะไร
สรุปทบทวน
ใช้ fail() สำหรับข้อผิดพลาดในการตรวจสอบข้อมูล หน้าเว็บจะอ่านข้อผิดพลาดเหล่านี้จากพร็อพ form เพื่อแสดงคำแนะนำที่เข้าใจง่าย
เรียนรู้ HTML ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 41
- บทเรียน
- 163
คำถามที่พบบ่อย
บทเรียน “การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Sveltejs Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Sveltejs Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions”
ส่งคืนข้อผิดพลาดจากการตรวจสอบและเติมข้อมูลในช่องแบบฟอร์มอีกครั้งโดยใช้ fail() และ ActionData คุณปฏิบัติ Sveltejs Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Sveltejs Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Sveltejs Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Sveltejs Academy นี้ได้ไหม
ได้ บทเรียน Sveltejs Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- +page.server.js พร้อม actions
- คำสั่ง use:enhance
- การเพิ่มความสามารถแบบค่อยเป็นค่อยไปสำหรับแบบฟอร์ม
- การจัดการข้อผิดพลาดจากการตรวจสอบใน Actions