ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript
ตัดสินใจว่าเมื่อใดควรพึ่งพาการตรวจสอบด้วย HTML5 แทน JavaScript ที่กำหนดเอง
ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
แนวทางการตรวจสอบความถูกต้องสองแบบ
แนวทางการตรวจสอบความถูกต้องของแบบฟอร์มมีสองแบบ:
- การตรวจสอบดั้งเดิมของ HTML5 — ใช้แอตทริบิวต์ในตัวและส่วนติดต่อของเบราว์เซอร์
- การตรวจสอบด้วย JavaScript — ใช้ตรรกะ ข้อความ และเวลาที่กำหนดเอง
แต่ละแบบมีจุดเด่นของตนเอง แบบฟอร์มในโลกจริงส่วนใหญ่มักใช้ทั้งสองแบบร่วมกัน
จุดเด่นของการตรวจสอบ HTML5
ข้อดีของการตรวจสอบดั้งเดิมของ HTML5:
- ไม่ต้องใช้ JavaScript เลย
- ทำงานได้แม้ไม่มี JS (การเพิ่มความสามารถแบบก้าวหน้า)
- มีข้อความข้อผิดพลาดจากเบราว์เซอร์ในตัว (รองรับภาษาต่าง ๆ!)
- แป้นพิมพ์บนอุปกรณ์เคลื่อนที่ใช้แอตทริบิวต์ type เช่น email, tel และ number
- มีคลาสเทียมของ CSS คือ
:valid/:invalid
จุดด้อยของการตรวจสอบ HTML5
ข้อจำกัดของการตรวจสอบดั้งเดิมของ HTML5:
- การกำหนดรูปแบบข้อความข้อผิดพลาดจำกัดอยู่ที่ค่าเริ่มต้นของเบราว์เซอร์
- ตรวจสอบเฉพาะตอนส่งแบบฟอร์ม ไม่ตรวจสอบเมื่อออกจากช่องหรือเมื่อป้อนข้อมูล
- ไม่สามารถตรวจสอบกฎที่เชื่อมโยงหลายช่องได้ เช่น รหัสผ่านตรงกัน
- ไม่สามารถตรวจสอบแบบอะซิงโครนัสได้ เช่น ตรวจสอบกับเซิร์ฟเวอร์ว่า username ถูกใช้ไปแล้วหรือไม่
- ข้อความข้อผิดพลาดแตกต่างกันไปตามเบราว์เซอร์และภาษาของ OS
จุดเด่นของการตรวจสอบด้วย JavaScript
ข้อดีของการตรวจสอบด้วย JavaScript:
- ควบคุมข้อความและรูปแบบข้อผิดพลาดได้อย่างเต็มที่
- กำหนดเวลาเองได้ เช่น เมื่อออกจากช่อง เมื่อป้อนข้อมูล หรือเมื่อส่งแบบฟอร์ม
- ตรวจสอบหลายช่องร่วมกัน เช่น การยืนยันรหัสผ่าน
- ตรวจสอบแบบอะซิงโครนัส เช่น ตรวจสอบว่า username ยังว่างอยู่หรือไม่
- มีพฤติกรรมสอดคล้องกันในเบราว์เซอร์ต่าง ๆ
จุดด้อยของการตรวจสอบด้วย JavaScript
ข้อจำกัดของการตรวจสอบด้วย JavaScript เพียงอย่างเดียว:
- ไม่ทำงานหาก JavaScript ถูกปิดใช้งานหรือถูกบล็อก
- ต้องเขียนและดูแลโค้ดมากขึ้น
- การเข้าถึงได้ต้องใช้ ARIA อย่างรอบคอบ
- เป็นการสร้างสิ่งที่เบราว์เซอร์ทำให้เองอยู่แล้วขึ้นมาใหม่
แนวทางแบบผสม
แนวทางที่แนะนำคือใช้ทั้งสองแบบร่วมกัน:
<form novalidate> <!-- disable default UI, keep semantics -->
<input type="email" required pattern="...">
<!-- HTML attributes: define the constraints -->
<!-- novalidate: custom JS shows the errors -->
</form>
<script>
// Use Constraint Validation API to read the validity state:
if (input.validity.valueMissing) showError('Required');
if (input.validity.typeMismatch) showError('Invalid email');
</script>ตรวจสอบฝั่งเซิร์ฟเวอร์เสมอ
ไม่ว่าจะใช้แนวทางฝั่งไคลเอนต์แบบใด ต้องตรวจสอบที่ฝั่งเซิร์ฟเวอร์เสมอ:
- ผู้ใช้สามารถปิดใช้งาน JavaScript ได้
- DevTools ของเบราว์เซอร์สามารถแก้ไขคำขอได้
- ผู้ไม่หวังดีจงใจหลีกเลี่ยงการตรวจสอบฝั่งไคลเอนต์
- การตรวจสอบฝั่งเซิร์ฟเวอร์คือด่านความปลอดภัย ส่วนการตรวจสอบฝั่งไคลเอนต์คือการปรับปรุงประสบการณ์ผู้ใช้
ประสบการณ์ผู้ใช้จากการตอบสนองแบบเรียลไทม์
แนวทางปฏิบัติที่มีงานวิจัยรองรับสำหรับการกำหนดเวลาการแจ้งผลการตรวจสอบ:
- อย่าแสดงข้อผิดพลาดก่อนที่ผู้ใช้จะโต้ตอบกับช่องนั้น
- ตรวจสอบเมื่อออกจากช่องเพื่อแสดงข้อผิดพลาดครั้งแรก
- ล้างข้อผิดพลาดทันทีเมื่อผู้ใช้แก้ไขแล้ว (เมื่อป้อนข้อมูล)
- แสดงตัวบ่งชี้ว่าสำเร็จ เช่น เครื่องหมายถูกสีเขียว เมื่อช่องถูกต้อง
การจัดการข้อผิดพลาดที่เข้าถึงได้
รายการตรวจสอบข้อผิดพลาดของแบบฟอร์มที่เข้าถึงได้:
- ข้อความข้อผิดพลาดควรเป็นข้อความ ไม่ใช่ใช้เพียงสี
- ใช้
role="alert"หรือaria-live="assertive"กับกล่องข้อผิดพลาด - กำหนด
aria-invalid="true"ให้ช่องกรอกข้อมูลที่ไม่ถูกต้อง - เชื่อมช่องกรอกข้อมูลกับข้อความข้อผิดพลาดด้วย
aria-describedby - ย้ายจุดโฟกัสไปยังข้อผิดพลาดแรกหลังการส่งแบบฟอร์มไม่สำเร็จ
Pattern ของ HTML5 เทียบกับ Regex ของเซิร์ฟเวอร์
โปรดระวังความแตกต่างระหว่าง pattern ของ HTML5 กับ regex ของเซิร์ฟเวอร์:
<!-- HTML5 pattern: implicitly anchored at start AND end -->
<input pattern="[a-z]+"> <!-- matches ONLY lowercase letters, nothing else -->
// Server-side (Python, Node, PHP):
// /^[a-z]+$/ === HTML5 pattern equivalent
// [a-z]+ would also match partial strings on server
// Keep server regex consistent with HTML patternไลบรารีตรวจสอบความถูกต้อง
ควรเลือกใช้ไลบรารีตรวจสอบความถูกต้องเมื่อใด:
- แบบฟอร์มง่าย — แอตทริบิวต์ของ HTML5 และ Constraint Validation API เพียงพอแล้ว
- แบบฟอร์มซับซ้อน — ใช้ React Hook Form, Formik หรือ Vee-Validate
- การตรวจสอบด้วยสคีมา — ใช้ Zod หรือ Yup ซึ่งทำงานบนเซิร์ฟเวอร์ได้เช่นกัน
- ตัวช่วยสร้างแบบหลายขั้นตอน — ควรใช้ไลบรารีสำหรับจัดการสถานะเสมอ
สรุปการเพิ่มความสามารถแบบก้าวหน้า
ลำดับชั้นการตรวจสอบที่เหมาะสมจากล่างขึ้นบน:
- ข้อจำกัดของ HTML5 — มีอยู่เสมอและทำงานได้โดยไม่ต้องใช้ JS
- CSS
:valid/:invalid— ให้ผลตอบสนองด้านภาพโดยไม่ต้องใช้ JS - Constraint Validation API ร่วมกับ
novalidate— ให้ประสบการณ์ผู้ใช้ที่ดีขึ้นด้วย JS - การตรวจสอบแบบอะซิงโครนัสที่กำหนดเอง — สำหรับกฎทางธุรกิจที่ซับซ้อน
- การตรวจสอบฝั่งเซิร์ฟเวอร์ — ด่านความปลอดภัย
ตรวจสอบความเข้าใจ
การตรวจสอบประเภทใดเป็นด่านความปลอดภัยที่แท้จริงและไม่สามารถหลีกเลี่ยงได้
สรุป: ข้อแลกเปลี่ยนของการตรวจสอบความถูกต้อง
สรุปกลยุทธ์การตรวจสอบความถูกต้อง:
- HTML5 ดั้งเดิม — เรียบง่าย รองรับการเพิ่มความสามารถแบบก้าวหน้า แต่กำหนดรูปแบบได้จำกัด
- JavaScript — ควบคุมได้เต็มที่ เข้าถึงได้ แต่หากไม่มี JS ก็ไม่มีการตรวจสอบ
- แบบผสม — ข้อจำกัดของ HTML5 + novalidate + ข้อผิดพลาดจาก JS แบบกำหนดเอง
- ฝั่งเซิร์ฟเวอร์ — จำเป็นต่อความปลอดภัย ไม่ใช่สิ่งที่เลือกละเว้นได้
- ตรวจสอบเมื่อออกจากช่อง ล้างข้อผิดพลาดเมื่อป้อนข้อมูล และย้ายจุดโฟกัสไปยังข้อผิดพลาดแรกเมื่อส่งแบบฟอร์ม
คำถามที่พบบ่อย
บทเรียน “ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript”
ตัดสินใจว่าเมื่อใดควรพึ่งพาการตรวจสอบด้วย HTML5 แทน JavaScript ที่กำหนดเอง คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม
ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- required pattern min max และ maxlength
- แอตทริบิวต์ novalidate
- พื้นฐาน Constraint Validation API
- ข้อแลกเปลี่ยนระหว่างการตรวจสอบด้วย HTML5 และ JavaScript