JavaScript Academy · 课时

客户端验证

Q: 「客户端验证」这节课中我会学到什么？

在发送输入内容之前进行验证。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在发送输入内容之前进行验证。

客户端验证 是 CoddyKit 上的免费 JavaScript Academy 课时。这是第 3 节课，共 4 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。

为什么要在客户端进行验证

客户端验证可以即时提供反馈，带来更流畅的体验。请记住，它只是便利功能，而不是安全措施：始终也要在服务器上进行验证。

在提交时进行验证

一种常见做法是在提交表单时检查字段，只要有任何内容无效就取消提交。

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

检查必填字段

使用 trim 处理该值，并拒绝空输入。这样可以避免接受仅由空格组成的字符串。

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

「客户端验证」这节课中我会学到什么？

在发送输入内容之前进行验证。你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 JavaScript Academy 需要有经验吗？

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

「客户端验证」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 JavaScript Academy