HTML required 属性深度解析：为何它离不开 form 标签？

required 属性的工作原理与 form 标签的关联

html5 引入的 required 属性为开发者提供了一种便捷的方式，在客户端对表单输入进行基本验证。当此属性存在于 <input>, <select>, <textarea> 等表单元素上时，它指定该字段在表单提交之前必须被填写。然而，理解其工作机制的关键在于它与 <form> 标签的紧密关联。

required 属性的验证逻辑是浏览器原生实现的，并且这一验证过程是作为表单提交事件的一部分被触发的。当用户尝试提交一个包含 required 字段的表单时，浏览器会检查这些字段是否为空。如果发现任何必填字段为空，浏览器会阻止表单提交，并显示一个默认的错误提示信息（通常是“请填写此字段”或类似提示），同时将焦点设置到第一个未通过验证的字段上。

这意味着，如果没有一个 <form> 标签来封装这些 <input> 元素，也就没有“表单提交”这一行为来触发 required 属性的验证。W3C 规范明确指出，required 属性的作用是指定输入字段“在提交表单之前必须被填写”。因此，脱离 <form> 标签的 <input required> 元素，其 required 属性将无法发挥原生验证作用。

正确与错误使用 required 属性

为了更好地理解 required 属性的行为，我们来看两个示例：一个是在 <form> 内部使用，另一个是脱离 <form> 使用。

示例：在 form 内部使用 required (正确用法)

当 <input> 元素位于 <form> 标签内部时，required 属性能够正常工作。

立即学习“前端免费学习笔记（深入）”；

百度AI开放平台

百度提供的综合性AI技术服务平台，汇集了多种AI能力和解决方案

42

查看详情

<form action="/submit-data" method="post">
  <label for="fname">名:</label><br>
  <input type="text" id="fname" name="fname" required><br><br>

  <label for="email">邮箱:</label><br>
  <input type="email" id="email" name="email" required><br><br>

  <input type="submit" value="提交">
</form>

行为解释: 在此示例中，如果用户尝试点击“提交”按钮而未填写“名”或“邮箱”字段，浏览器将阻止表单提交，并显示相应的错误提示，要求用户填写这些必填字段。这是 required 属性的预期行为。

示例：脱离 form 使用 required (错误用法)

当 <input> 元素不被任何 <form> 标签包含时，required 属性将不起作用。

<label for="lname">姓:</label><br>
<input type="text" id="lname" name="lname" required><br><br>

<button type="button" onclick="alert('尝试提交')">提交（不会触发验证）</button>

行为解释: 尽管 <input type="text" id="lname" name="lname" required> 带有 required 属性，但由于它不属于任何 <form> 元素，因此点击旁边的“提交”按钮（或任何其他操作）都不会触发浏览器原生的 required 验证。用户可以不填写该字段而没有任何提示。

无表单场景下的验证方案：JavaScript

如果你的 <input> 元素确实需要验证，但又不希望将其放入 <form> 标签中（例如，在一个单页应用中，数据通过 AJAX 提交），那么你需要借助 JavaScript 来实现客户端验证。

JavaScript 提供了 ValidityState API 和 checkValidity() 方法，可以手动检查表单元素的有效性。

<label for="username">用户名:</label><br>
<input type="text" id="username" name="username" required minlength="3"><br>
<span id="usernameError" style="color: red;"></span><br><br>

<button type="button" id="validateBtn">验证用户名</button>

<script>
  const usernameInput = document.getElementById('username');
  const usernameError = document.getElementById('usernameError');
  const validateBtn = document.getElementById('validateBtn');

  validateBtn.addEventListener('click', () => {
    // 手动检查输入字段的有效性
    if (!usernameInput.checkValidity()) {
      // 如果字段无效，可以获取更详细的错误信息
      if (usernameInput.validity.valueMissing) {
        usernameError.textContent = '用户名是必填项。';
      } else if (usernameInput.validity.tooShort) {
        usernameError.textContent = `用户名至少需要 ${usernameInput.minLength} 个字符。`;
      }
      // 阻止默认的错误提示（可选，因为没有表单提交）
      // usernameInput.reportValidity(); // 可以在需要时手动触发浏览器默认提示
    } else {
      usernameError.textContent = ''; // 清除错误信息
      alert('用户名有效！');
      // 在这里可以执行数据提交等操作
    }
  });

  // 实时验证（可选）
  usernameInput.addEventListener('input', () => {
    if (usernameInput.checkValidity()) {
      usernameError.textContent = '';
    }
  });
</script>

代码解释: 在这个 JavaScript 示例中，我们监听了一个按钮的点击事件。当按钮被点击时，usernameInput.checkValidity() 方法会被调用。如果输入字段无效（例如，为空或长度不足），它会返回 false。我们可以通过 usernameInput.validity 对象来获取具体的验证状态（如 valueMissing 表示值缺失，tooShort 表示过短），然后手动显示自定义的错误信息。

使用 required 属性的注意事项

1. 客户端验证是第一道防线，而非唯一防线： required 属性提供的客户端验证能够即时反馈用户，提升用户体验，减少服务器压力。但它绝不能替代服务器端验证。恶意用户可以通过开发者工具禁用 JavaScript 或直接修改 HTML，绕过客户端验证。所有提交到服务器的数据都必须在服务器端进行严格验证。
2. 用户体验： 默认的浏览器验证提示可能不符合所有设计风格。可以通过 CSS (:invalid, :valid) 或 JavaScript API (setCustomValidity()) 来定制验证提示的样式和内容，以提供更友好的用户体验。
3. 无障碍性： 确保在使用 required 属性时，结合 ARIA 属性（如 aria-required="true"）来增强表单的无障碍性，以便辅助技术能够正确识别必填字段。

总结

required 属性是 HTML5 表单验证的重要组成部分，但其有效性严格依赖于其所在的 <form> 元素。它通过与表单提交事件绑定，提供原生的客户端验证功能。当 <input> 元素脱离 <form> 标签时，required 属性将失去其原生验证能力。在这种情况下，开发者需要利用 JavaScript 及其 ValidityState API 来实现自定义的客户端验证逻辑。理解这一核心机制对于构建健壮且用户友好的 Web 表单至关重要。

以上就是HTML required 属性深度解析：为何它离不开 form 标签？的详细内容，更多请关注php中文网其它相关文章！