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

พื้นฐานการตรวจสอบตัวเลข
เพิ่ม เงื่อนไขตรวจสอบแบบง่าย: ตรวจสอบชนิด ตรวจสอบช่วง และปรับให้อยู่ในรูปแบบมาตรฐานเป็นค่าสุดท้าย
// 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"));

เอสเคปเพื่อแสดงผลอย่างปลอดภัย
ก่อนแสดงข้อความของผู้ใช้ ให้เอสเคปอักขระพิเศษ เพื่อให้ส่วนติดต่อผู้ใช้จัดการข้อความนั้นเป็นข้อความธรรมดา
// Escape a few risky characters before displaying in HTML contexts
function escapeText(s) {
if (typeof s !== "string") return "";
return s
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll("\"", """)
.replaceAll("'", "'");
}
console.log("escaped:", escapeText("<b>Hello & bye</b>"));

รายการที่อนุญาตในทางปฏิบัติ
ควรใช้รายการที่อนุญาตกับชุดค่าคงที่ เช่น รหัสหรือบทบาท และปรับตัวพิมพ์ใหญ่เล็กกับช่องว่างให้เป็นรูปแบบเดียวกัน
// 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"));

ตัวตรวจสอบออบเจ็กต์ขนาดเล็ก
ตรวจสอบชนิดและขอบเขต จากนั้นส่งคืนโครงสร้างที่ปรับเป็นรูปแบบมาตรฐาน ซึ่งโค้ดส่วนที่เหลือไว้วางใจได้
// 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" }));

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

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

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

คำถามที่พบบ่อย
บทเรียน “การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตรวจสอบอินพุตและพื้นฐานการหลีกอักขระ
- การผสานออบเจ็กต์อย่างปลอดภัย การแช่แข็งและการผนึก
- ขอบเขตข้อผิดพลาด (เชิงแนวคิด) โดยไม่ใช้เฟรมเวิร์ก