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

การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ

ตรวจสอบและปรับรูปแบบอินพุตด้วยรายการอนุญาตและตัวตรวจเงื่อนไขขนาดเล็ก พร้อมหลีกอักขระเสี่ยงก่อนแสดงข้อความ

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

ภาพรวม

เป้าหมาย: ทำให้ข้อมูลนำเข้าน่าเบื่อและปลอดภัย

  • ใช้ เงื่อนไขตรวจสอบ เพื่อปฏิเสธข้อมูลตั้งแต่เนิ่น ๆ
  • ควรใช้ รายการที่อนุญาต แทนกฎที่คลุมเครือ
  • ปรับให้อยู่ในรูปแบบมาตรฐาน ที่เรียบง่าย
  • จัดการอักขระพิเศษให้ปลอดภัย ก่อนแสดงข้อความ
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 1

พื้นฐานการตรวจสอบตัวเลข

เพิ่ม เงื่อนไขตรวจสอบแบบง่าย: ตรวจสอบชนิด ตรวจสอบช่วง และปรับให้อยู่ในรูปแบบมาตรฐานเป็นค่าสุดท้าย

// Validate age: number and range guard
function parseAge(input) {
  // trim and parse
  const n = Number(input);
  if (!Number.isFinite(n)) return null; // reject non-numbers
  if (n < 0 || n > 130) return null;    // reject out-of-range
  return Math.floor(n);                  // normalize to integer
}

console.log("age ok:", parseAge("21"));
console.log("age bad:", parseAge("twenty"));
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 2

เอสเคปเพื่อแสดงผลอย่างปลอดภัย

ก่อนแสดงข้อความของผู้ใช้ ให้เอสเคปอักขระพิเศษ เพื่อให้ส่วนติดต่อผู้ใช้จัดการข้อความนั้นเป็นข้อความธรรมดา

// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
  if (typeof s !== "string") return "";
  return s
    .replaceAll("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll("\"", "&quot;")
    .replaceAll("'", "&#39;");
}

console.log("escaped:", escapeText("<b>Hello & bye</b>"));
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 3

รายการที่อนุญาตในทางปฏิบัติ

ควรใช้รายการที่อนุญาตกับชุดค่าคงที่ เช่น รหัสหรือบทบาท และปรับตัวพิมพ์ใหญ่เล็กกับช่องว่างให้เป็นรูปแบบเดียวกัน

// Allowlist example: only certain country codes
const ALLOWED = new Set(["TR", "US", "DE", "GB"]);

function parseCountry(code) {
  if (typeof code !== "string") return null;
  const up = code.trim().toUpperCase();
  if (!ALLOWED.has(up)) return null; // reject unknown
  return up; // normalized
}

console.log("country ok:", parseCountry("tr"));
console.log("country bad:", parseCountry("xx"));
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 4

ตัวตรวจสอบออบเจ็กต์ขนาดเล็ก

ตรวจสอบชนิดและขอบเขต จากนั้นส่งคืนโครงสร้างที่ปรับเป็นรูปแบบมาตรฐาน ซึ่งโค้ดส่วนที่เหลือไว้วางใจได้

// Validate a tiny user object and normalize
function validateUser(input) {
  if (typeof input !== "object" || input === null) return null;

  const nameOk = typeof input.name === "string" && input.name.trim().length >= 1 && input.name.trim().length <= 40;
  const ageOk = parseAge(input.age) !== null;

  if (!nameOk || !ageOk) return null;

  return {
    name: input.name.trim(),
    age: parseAge(input.age)
  };
}

console.log("user ok:", validateUser({ name: " Ayla ", age: "22" }));
console.log("user bad:", validateUser({ name: "", age: "old" }));
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 5

แนวปฏิบัติด้านการป้องกันที่ดี

เคล็ดลับ:

  • ตรวจสอบที่จุดรับข้อมูล เช่น อินพุตจากผู้ใช้และเครือข่าย
  • ใช้รายการที่อนุญาต ช่วงค่า และการตรวจสอบชนิด
  • ปรับเป็นรูปแบบมาตรฐาน เพียงครั้งเดียว แล้วทำให้ส่วนที่เหลือเรียบง่าย
  • เอสเคปก่อนแสดงข้อความให้ผู้ใช้เห็น
การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 6

แบบทดสอบพื้นฐานอินพุตเชิงป้องกัน

ตรวจสอบอย่างรวดเร็ว: รูปแบบอินพุตที่ปลอดภัย

การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 7

ทบทวน

ทบทวน: ป้องกันตั้งแต่เนิ่น ๆ ใช้รายการที่อนุญาต ปรับให้เป็นโครงสร้างที่ปลอดภัย และเอสเคปก่อนแสดงผล ทำให้แต่ละขั้นตอนเล็กและอ่านง่าย

การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ — ภาพประกอบ 8

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

บทเรียน “การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ”

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

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

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

บทเรียน “การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ” ใช้เวลานานแค่ไหน

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

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

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

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

  1. การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ
  2. การผสานออบเจ็กต์อย่างปลอดภัย การแช่แข็งและการผนึก
  3. ขอบเขตข้อผิดพลาด (เชิงแนวคิด) โดยไม่ใช้เฟรมเวิร์ก
← กลับไปที่ JavaScript Academy