HTML Academy · บทเรียน

Constraint Validation API

อ่านสถานะความถูกต้องและตรวจสอบข้อจำกัดด้วย JavaScript

Constraint Validation API เป็นบทเรียน HTML Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน HTML Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

การตรวจสอบความถูกต้องโดยไม่ใช้ JavaScript

HTML5 เพิ่มการตรวจสอบความถูกต้องของแบบฟอร์มในตัวผ่านแอตทริบิวต์ต่าง ๆ ได้แก่ required, type="email", type="number", min, max, pattern, minlength และ maxlength เบราว์เซอร์จะตรวจสอบโดยอัตโนมัติเมื่อส่งแบบฟอร์มและแสดงข้อความข้อผิดพลาด โดยไม่จำเป็นต้องใช้ JS

<input type="email" name="email" required>
<input type="number" name="age" min="18" max="120" required>
<input type="text" name="phone" pattern="\d{10}" required>

ตัวเลือก CSS สำหรับการตรวจสอบความถูกต้อง

:invalid จะจับคู่กับช่องรับข้อมูลที่ไม่ผ่านการตรวจสอบความถูกต้อง ส่วน :valid จะจับคู่กับช่องรับข้อมูลที่ผ่านการตรวจสอบแล้ว :user-invalid (แบบสมัยใหม่) จะจับคู่เฉพาะหลังจากผู้ใช้โต้ตอบกับแบบฟอร์มแล้ว จึงช่วยหลีกเลี่ยงการแสดงเส้นขอบสีแดงในแบบฟอร์มที่ยังไม่มีการใช้งาน ใช้คลาสเสมือนเหล่านี้เพื่อกำหนดรูปแบบให้ข้อผิดพลาด

input:user-invalid {
  border-color: red;
}
input:user-invalid + .error {
  display: block;
}

ออบเจ็กต์ ValidityState

ตัวควบคุมแบบฟอร์มทุกตัวจะแสดงคุณสมบัติ validity ซึ่งเป็นออบเจ็กต์ ValidityState ที่มีแฟล็กค่าบูลีน ได้แก่ valid, valueMissing, typeMismatch, patternMismatch, rangeUnderflow, tooShort และอื่น ๆ ตรวจสอบค่าเหล่านี้เพื่อเลือกว่าจะแสดงข้อผิดพลาดใด

const input = form.querySelector("input[type=email]");
if (input.validity.typeMismatch) {
  showError(input, "Please enter a valid email address");
}

เมธอด checkValidity

input.checkValidity() จะคืนค่า true หากค่าผ่านข้อจำกัดทั้งหมด และคืนค่า false มิฉะนั้น ส่วน form.checkValidity() จะตรวจสอบแบบฟอร์มทั้งหมด เหมาะสำหรับการตรวจสอบด้วยโปรแกรมก่อนดำเนินการ AJAX หรือก่อนอนุญาตให้ผู้ใช้ไปยังขั้นถัดไปในกระบวนการแบบหลายขั้น

เมธอด reportValidity

input.reportValidity() ทำงานเหมือน checkValidity แต่จะเรียกใช้คำแนะนำแบบป๊อปอัปในตัวของเบราว์เซอร์เพิ่มเติม และเลื่อนไปยังช่องที่ไม่ถูกต้องช่องแรก ใช้เมื่อต้องการส่วนติดต่อผู้ใช้แบบดั้งเดิมโดยไม่ต้องสร้างเอง ส่วนใช้ checkValidity เมื่อต้องการแสดงข้อผิดพลาดที่กำหนดเองทั้งหมด

การปรับแต่งข้อความในตัว

ข้อความเริ่มต้นของเบราว์เซอร์ ("โปรดกรอกข้อมูลในช่องนี้") อาจไม่ตรงกับน้ำเสียงหรือภาษาที่คุณต้องการ แทนที่ข้อความได้ด้วย input.setCustomValidity("Enter a valid coupon code") ช่องรับข้อมูลจะถือว่าไม่ถูกต้องจนกว่าคุณจะล้างข้อความด้วย setCustomValidity("")

novalidate ปิดใช้ส่วนติดต่อผู้ใช้ของเบราว์เซอร์

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

การรับฟังเหตุการณ์ invalid

ตัวควบคุมแต่ละตัวจะส่งเหตุการณ์ invalid เมื่อการตรวจสอบความถูกต้องไม่ผ่าน รับฟังเหตุการณ์นี้เพื่อปิดคำแนะนำแบบป๊อปอัปเริ่มต้นและแสดงข้อความที่กำหนดเอง: input.addEventListener("invalid", (e) => { e.preventDefault(); showError(input); })

รูปแบบด้วยนิพจน์ปกติ

แอตทริบิวต์ pattern ใช้เก็บนิพจน์ปกติของ JavaScript ที่ค่าจะต้องตรงกันทั้งหมด (ไม่จำเป็นต้องใช้จุดยึด ^ และ $ เนื่องจากมีอยู่โดยนัย) ใช้ร่วมกับแอตทริบิวต์ title เพื่ออธิบายรูปแบบที่ผู้ใช้ควรป้อน

ยังคงต้องตรวจสอบความถูกต้องฝั่งเซิร์ฟเวอร์

การตรวจสอบความถูกต้องของ HTML ช่วยอำนวยความสะดวกแก่ผู้ใช้ แต่ใครก็ตามที่แก้ไข DOM ก็สามารถข้ามการตรวจสอบนี้ได้ ควรตรวจสอบซ้ำบนเซิร์ฟเวอร์เสมอ ข้อจำกัดของ HTML มีไว้เพื่อประสบการณ์ผู้ใช้ (แจ้งผลทันทีและลดการส่งข้อมูลไปกลับ) ไม่ใช่เพื่อความปลอดภัย

การรวมข้อจำกัดหลายรายการ

ข้อจำกัดจะทำงานร่วมกัน: <input type="number" min="18" max="120" required step="1"> ต้องมีค่า ต้องเป็นจำนวนเต็ม และต้องอยู่ระหว่าง 18 ถึง 120 เบราว์เซอร์จะแสดงผ่านแฟล็กของ ValidityState ว่าข้อจำกัดใดโดยเฉพาะไม่ผ่าน เพื่อให้คุณแสดงข้อความที่ถูกต้องได้

ตรวจสอบความรู้

คลาสเสมือน CSS :user-invalid แตกต่างจาก :invalid อย่างไร

สรุป

แอตทริบิวต์การตรวจสอบความถูกต้องในตัว (required, type, pattern, min, max) และ API ของ ValidityState ช่วยให้ตรวจสอบข้อมูลฝั่งไคลเอ็นต์ได้อย่างมีประสิทธิภาพโดยไม่ใช้ JS เป็นค่าเริ่มต้น CSS :user-invalid ใช้กำหนดรูปแบบข้อผิดพลาดหลังจากมีการโต้ตอบ checkValidity/reportValidity ใช้สำหรับการตรวจสอบด้วยโปรแกรม setCustomValidity ใช้แทนที่ข้อความเริ่มต้น ควรตรวจสอบซ้ำบนเซิร์ฟเวอร์เสมอ

คำถามที่พบบ่อย

บทเรียน “Constraint Validation API” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “Constraint Validation API” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส HTML Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส HTML Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “Constraint Validation API”

อ่านสถานะความถูกต้องและตรวจสอบข้อจำกัดด้วย JavaScript คุณปฏิบัติ HTML Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน HTML Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน HTML Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “Constraint Validation API” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน HTML Academy นี้ได้ไหม

ได้ บทเรียน HTML Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ HTML Academy