0Pricing
JavaScript Academy · บทเรียน

การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์

ตรวจสอบข้อมูลป้อนเข้าก่อนส่งไปที่ใดก็ตาม

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

เหตุผลที่ตรวจสอบฝั่งไคลเอ็นต์

การตรวจสอบฝั่งไคลเอ็นต์ให้ผลตอบกลับทันทีและทำให้ใช้งานได้ราบรื่นยิ่งขึ้น แต่โปรดจำไว้ว่านี่เป็นเพียงความสะดวก ไม่ใช่การรักษาความปลอดภัย ดังนั้นต้องตรวจสอบบนเซิร์ฟเวอร์ด้วยเสมอ

การตรวจสอบเมื่อส่งฟอร์ม

รูปแบบที่ใช้กันทั่วไปคือตรวจสอบช่องข้อมูลเมื่อมีการส่งฟอร์ม และยกเลิกการส่งหากมีสิ่งใดไม่ถูกต้อง

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

การตรวจสอบช่องที่จำเป็นต้องกรอก

ตัดช่องว่างจากค่าแล้วปฏิเสธข้อมูลที่ว่างเปล่า การตัดช่องว่างช่วยป้องกันไม่ให้ยอมรับสตริงที่มีแต่ช่องว่าง

function checkName() {
  const v = nameInput.value.trim();
  return v.length > 0;
}

กฎความยาว

เปรียบเทียบความยาวหลังตัดช่องว่างกับขอบเขตต่ำสุดและสูงสุดสำหรับช่องข้อมูล เช่น ช่องรหัสผ่าน

function checkPassword() {
  const v = passwordInput.value;
  return v.length >= 8 && v.length <= 64;
}

การจับคู่รูปแบบ

นิพจน์ทั่วไปใช้ตรวจสอบรูปแบบต่าง ๆ เช่น รูปแบบอีเมล ควรรักษารูปแบบให้เรียบง่ายและใช้ร่วมกับการตรวจสอบบนเซิร์ฟเวอร์

function checkEmail() {
  const v = emailInput.value.trim();
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v);
}

การแสดงข้อความข้อผิดพลาด

แสดงผลตอบกลับใกล้ช่องข้อมูลโดยใช้องค์ประกอบข้อผิดพลาดเฉพาะและ textContent เพื่อป้องกัน XSS

function showError(field, msg) {
  const err = field.nextElementSibling;
  err.textContent = msg;
}

การล้างข้อผิดพลาด

รีเซ็ตข้อความเมื่อช่องข้อมูลถูกต้อง เพื่อไม่ให้ข้อผิดพลาดเก่าค้างอยู่

function clearError(field) {
  field.nextElementSibling.textContent = "";
}

การตรวจสอบแบบทันที

ตรวจสอบเมื่อเกิดเหตุการณ์ input หรือ blur เพื่อแสดงผลตอบกลับแบบเรียลไทม์ขณะที่ผู้ใช้พิมพ์หรือออกจากช่องข้อมูล

emailInput.addEventListener("blur", () => {
  if (!checkEmail()) showError(emailInput, "Invalid email");
  else clearError(emailInput);
});

การรองรับเทคโนโลยีสิ่งอำนวยความสะดวก

ตั้งค่า aria-invalid และเชื่อมโยงข้อผิดพลาดด้วย aria-describedby เพื่อให้เทคโนโลยีสิ่งอำนวยความสะดวกประกาศปัญหา

emailInput.setAttribute("aria-invalid", "true");

การย้ายโฟกัสไปยังข้อผิดพลาดแรก

เมื่อการส่งฟอร์มล้มเหลว ให้ย้ายโฟกัสไปยังช่องข้อมูลแรกที่ไม่ถูกต้อง เพื่อให้ผู้ใช้แก้ไขได้ทันที

function focusFirstError(fields) {
  const bad = fields.find((f) => !f.valid);
  if (bad) bad.el.focus();
}

ตรวจสอบฝั่งเซิร์ฟเวอร์ด้วย

การตรวจสอบฝั่งไคลเอ็นต์สามารถหลีกเลี่ยงได้ด้วยการปิด JavaScript หรือสร้างคำขอขึ้นเอง ให้ถือว่าเซิร์ฟเวอร์เป็นแหล่งข้อมูลที่เชื่อถือได้สูงสุด

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

แนวคิดด้านความปลอดภัย

สรุปทบทวน

การตรวจสอบด้วยตนเองจะตรวจสอบช่องข้อมูลตามเงื่อนไขที่จำเป็นต้องกรอก ความยาว และรูปแบบ แล้วใช้ preventDefault ยกเลิกการส่งเมื่อไม่ผ่าน แสดงและล้างข้อความอย่างปลอดภัยด้วย textContent ตรวจสอบแบบทันทีเมื่อเกิด input/blur ปรับปรุงการเข้าถึงด้วย aria-invalid และย้ายโฟกัสไปยังข้อผิดพลาดแรก ต้องตรวจสอบซ้ำบนเซิร์ฟเวอร์เสมอ

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

บทเรียน “การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์”

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

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

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

บทเรียน “การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การอ่านค่าจากช่องป้อนข้อมูล
  2. เหตุการณ์ submit
  3. การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์
  4. Constraint Validation API
← กลับไปที่ JavaScript Academy