JavaScript Academy · 课时

输入验证与转义基础

Q: 「输入验证与转义基础」这节课中我会学到什么？

使用小型允许列表和守卫来验证并规范化输入；在显示文本前转义有风险的字符 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

使用小型允许列表和守卫来验证并规范化输入；在显示文本前转义有风险的字符

输入验证与转义基础 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 1 节课，共 3 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 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("&", "&amp;")
    .replaceAll("<", "&lt;")
    .replaceAll(">", "&gt;")
    .replaceAll("\"", "&quot;")
    .replaceAll("'", "&#39;");
}

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 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 3 节课。

「输入验证与转义基础」这节课中我会学到什么？

使用小型允许列表和守卫来验证并规范化输入；在显示文本前转义有风险的字符你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 3 节。

「输入验证与转义基础」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 JavaScript Academy 课中编写并运行代码吗？

能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

此课程中的所有课时

← 返回 JavaScript Academy