HTML Academy · 课时

novalidate 属性

Q: 「novalidate 属性」这节课中我会学到什么？

在自行处理验证时禁用浏览器验证 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

在自行处理验证时禁用浏览器验证

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

浏览器验证的局限性

HTML5 内置验证存在以下局限性：

错误消息取决于浏览器，且难以设置样式
验证只会在提交时运行，不会在失焦或输入时运行
无法处理复杂的业务规则（密码匹配、用户名是否唯一）

需要完全控制验证时，请使用 novalidate 禁用内置验证。

表单上的 novalidate

将 novalidate 添加到表单后，会禁用浏览器的所有验证：

<form action="/register" method="post" novalidate>
  <!-- Browser will NOT validate these on submit -->
  <input type="email" name="email" required>
  <input type="password" name="password" minlength="8" required>
  <button type="submit">Register</button>
</form>

为什么使用 novalidate

禁用浏览器验证的常见原因：

自定义错误消息样式，使其符合您的设计系统
实时验证（在失焦或输入时验证，而不只是提交时验证）
多字段验证（例如密码确认）
重定向后显示服务器端错误
使用第三方验证库（Zod、Yup、React Hook Form）

自定义验证模式

使用 novalidate 构建自定义验证：

<form id="form" novalidate>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <span class="error" id="email-error" role="alert" hidden></span>

  <button type="submit">Submit</button>
</form>

<script>
document.getElementById('form').addEventListener('submit', (e) => {
  e.preventDefault();
  const email = document.getElementById('email');
  const error = document.getElementById('email-error');

  if (!email.value || !email.value.includes('@')) {
    error.textContent = 'Please enter a valid email address.';
    error.hidden = false;
    email.focus();
  } else {
    error.hidden = true;
    // Submit...
  }
});
</script>

按钮上的 formnovalidate

无需在整个表单上使用 novalidate，即可为特定的提交按钮禁用验证：

<form action="/save" method="post">
  <input type="email" name="email" required>

  <!-- Save as draft: skip validation -->
  <button type="submit" formaction="/save-draft" formnovalidate>
    Save Draft
  </button>

  <!-- Final submit: normal validation -->
  <button type="submit">Submit</button>
</form>

设置自定义错误的样式

自定义验证错误样式：

.field-error {
  color: #ef4444;
  font-size: 0.875rem;
  margin-top: 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

input.invalid {
  border-color: #ef4444;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);
}

input.valid {
  border-color: #22c55e;
}

可访问的自定义错误

让自定义错误消息更易于访问：

<label for="email">Email</label>
<input
  type="email"
  id="email"
  name="email"
  aria-describedby="email-error"
  aria-invalid="false"
>
<span id="email-error" role="alert"></span>
<!-- aria-invalid="true" when invalid -->
<!-- role="alert" announces changes to screen readers -->
<!-- aria-describedby links the input to its error message -->

验证时机策略

使用 novalidate 时的验证时机：

提交时 — 最简单；一次验证所有内容
失焦时 — 用户离开字段时验证该字段
输入时 — 实时验证；用户体验最佳，但可能让人觉得过于激进
混合方式 — 失焦时验证；输入时清除错误

失焦与输入混合模式

最方便用户的验证方式：

function validateEmail(input, errorEl) {
  const val = input.value.trim();
  if (!val) {
    showError(input, errorEl, 'Email is required.');
  } else if (!/^[^@]+@[^@]+\.[^@]+$/.test(val)) {
    showError(input, errorEl, 'Enter a valid email address.');
  } else {
    clearError(input, errorEl);
  }
}

input.addEventListener('blur', () => validateEmail(input, errorEl));
input.addEventListener('input', () => {
  // Only clear the error while typing, don't re-validate until blur
  if (input.classList.contains('invalid')) validateEmail(input, errorEl);
});

novalidate 与服务器端验证

始终同时进行服务器端验证：

客户端验证用于改善用户体验
服务器端验证用于保障安全
用户可以通过修改请求来绕过 HTML 验证
novalidate 加自定义 JS 验证时，应与服务器规则保持一致

验证库

适合与 novalidate 配合使用的热门 JavaScript 验证库：

Zod — 以 TypeScript 为核心的模式验证库
Yup — 对象模式验证库
Valibot — 轻量级模式库
React Hook Form — 用于 React 的表单状态与验证库

测试自定义验证

测试自定义表单验证的方法：

测试空提交（必填字段）
测试无效格式（错误的电子邮件地址、错误的电话号码格式）
测试边界情况（只有空格、Unicode、超长字符串）
使用屏幕阅读器测试，确认错误消息是否会被播报
测试显示错误后字段之间的键盘导航

快速检查

按钮上的 formnovalidate 有什么作用？

回顾：novalidate

novalidate 要点：

表单上的 novalidate — 禁用所有浏览器验证
按钮上的 formnovalidate — 仅对本次提交禁用验证
使用自定义验证来控制用户体验并处理复杂规则
始终进行服务器端验证 — 客户端验证可以被绕过
使用 role="alert" 和 aria-invalid 以无障碍方式播报错误

常见问题解答

「novalidate 属性」课时是免费的吗？

是的 — 「novalidate 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。

「novalidate 属性」这节课中我会学到什么？

在自行处理验证时禁用浏览器验证你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML Academy 需要有经验吗？

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

「novalidate 属性」课时需要多长时间？

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

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

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

此课程中的所有课时

← 返回 HTML Academy