JavaScript Academy · บทเรียน

Constraint Validation API

ใช้การตรวจสอบความถูกต้องที่มีมาให้ในตัว

บทเรียน 4 จาก 413 ขั้นตอน

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

การตรวจสอบความถูกต้องในตัว

ช่องฟอร์ม HTML รองรับแอตทริบิวต์อย่าง required, min, max, pattern และ type="email" ส่วน API การตรวจสอบข้อจำกัดช่วยให้ JavaScript ตรวจสอบและควบคุมการตรวจสอบความถูกต้องในตัวนี้ได้

checkValidity

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

const email = document.querySelector("#email");
console.log(email.checkValidity());

reportValidity

reportValidity คล้ายกับ checkValidity แต่ยังแสดงส่วนติดต่อข้อความตรวจสอบความถูกต้องของเบราว์เซอร์สำหรับช่องข้อมูลที่ไม่ถูกต้องด้วย

if (!form.reportValidity()) {
  console.log("show built-in errors");
}

ออบเจ็กต์สถานะความถูกต้อง

ตัวควบคุมแต่ละตัวมีออบเจ็กต์ validity ซึ่งประกอบด้วยแฟล็กบูลีนที่อธิบายอย่างชัดเจนว่ามีปัญหาใด

console.log(email.validity.valueMissing);  // empty required
console.log(email.validity.typeMismatch);  // wrong format
console.log(email.validity.tooShort);

validity.valid

validity.valid จะเป็น true ก็ต่อเมื่อช่องข้อมูลผ่านข้อจำกัดทุกข้อ โดยสรุปสถานะจากแฟล็กอื่น ๆ

if (email.validity.valid) {
  console.log("ok");
}

validationMessage

validationMessage เก็บข้อความที่แปลตามภาษาท้องถิ่น ซึ่งเบราว์เซอร์จะแสดงสำหรับข้อผิดพลาดปัจจุบัน

console.log(email.validationMessage);

setCustomValidity

setCustomValidity ทำเครื่องหมายว่าช่องข้อมูลไม่ถูกต้องพร้อมข้อความของคุณเอง สตริงที่ไม่ว่างหมายถึงไม่ถูกต้อง ส่วนสตริงว่างจะล้างข้อความนั้น

function checkMatch() {
  if (pass.value !== confirm.value) {
    confirm.setCustomValidity("Passwords must match");
  } else {
    confirm.setCustomValidity("");
  }
}

ล้างข้อผิดพลาดที่กำหนดเองเสมอ

หากตั้งข้อความที่กำหนดเอง คุณต้องล้างข้อความด้วยสตริงว่างเมื่อข้อมูลถูกต้อง มิฉะนั้นช่องข้อมูลจะยังคงไม่ถูกต้องตลอดไป

confirm.addEventListener("input", () => {
  confirm.setCustomValidity("");
  checkMatch();
});

เหตุการณ์ข้อมูลไม่ถูกต้อง

รับฟังเหตุการณ์ invalid เพื่อเรียกใช้ตรรกะที่กำหนดเอง เช่น การกำหนดรูปแบบให้ช่องข้อมูล เมื่อการตรวจสอบล้มเหลว

email.addEventListener("invalid", () => {
  email.classList.add("error");
});

การปิดข้อความแจ้งเตือนดั้งเดิม

เพิ่ม novalidate ให้กับฟอร์มเพื่อระงับหน้าต่างแจ้งเตือนดั้งเดิมของเบราว์เซอร์ ขณะเดียวกันยังใช้ API เพื่อแสดงข้อความของคุณเองได้

form.setAttribute("novalidate", "");
form.addEventListener("submit", (e) => {
  if (!form.checkValidity()) e.preventDefault();
});

การกำหนดรูปแบบตามสถานะถูกต้องและไม่ถูกต้อง

คลาสเทียมของ CSS อย่าง :valid และ :invalid จะกำหนดรูปแบบให้ช่องข้อมูลโดยอัตโนมัติตามสถานะความถูกต้อง

ตรวจสอบอย่างรวดเร็ว

กฎการตรวจสอบแบบกำหนดเอง

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุปทบทวน

API การตรวจสอบข้อจำกัดทำงานร่วมกับแอตทริบิวต์ข้อจำกัดของ HTML ใช้ checkValidity/reportValidity เพื่อทดสอบและเลือกได้ว่าจะแสดงข้อผิดพลาดหรือไม่ ตรวจสอบแฟล็กใน validity และ validationMessage และเพิ่มกฎที่กำหนดเองด้วย setCustomValidity โดยล้างค่าด้วยสตริงว่าง เหตุการณ์ invalid และ CSS :valid/:invalid ช่วยในการกำหนดรูปแบบ

เริ่มต้นได้ฟรี

เรียนรู้ JavaScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 59
บทเรียน: 200

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

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

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

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

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

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

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

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

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

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

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

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

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