当前位置：首页 > 文章列表 > 文章 > 前端 > HTML5必填项标记方法及required属性详解

HTML5必填项标记方法及required属性详解

2026-01-15 14:39:42 0浏览收藏

大家好，我们又见面了啊~本文《HTML5表单必填项标记方法\_required属性详解》的内容中将会涉及到等等。如果你正在学习文章相关知识，欢迎关注我，以后会给大家带来更多文章相关文章，希望我们能一起进步！下面就开始本文的正式内容~

HTML5中required属性仅适用于input（除hidden/button/image）、select、textarea等有值概念的表单控件，校验逻辑仅判断是否为空值或未选中，不处理空格、零值等语义内容，且需配合JS和后端双重验证确保可靠性。

HTML5框架表单必填项怎么标记_required属性使用说明【教程】

HTML5 中标记表单必填项，直接给 input、select、textarea 等表单控件加上 required 属性即可，浏览器会自动校验且阻止提交——但这个属性的行为和兼容性有细节陷阱，不能只加了就完事。

哪些元素支持 `required` 属性

只有可填写、有值概念的表单控件才支持 required。常见支持的包括：

input（类型为 text、email、password、number、checkbox、radio、file 等，但 hidden、button、image 不支持）
select（注意：必须至少有一个 option 没有 disabled 且没设 selected，否则可能绕过校验）
textarea

不支持的典型例子：fieldset、label、output、自定义 Web Component（除非手动实现 validity API）。

`required` 的实际校验逻辑

浏览器只检查控件的 value 是否为空字符串（''）、未选中（checkbox/radio）、或未选择（select 的第一个选项是 disabled 且无其他 selected）。它不关心空格、换行、零值等语义内容。

<input type="text" required>：输入纯空格会被认为“已填写”，校验通过
<input type="number" required>：清空后值为 ''，触发校验；但输入 0 是合法值
<input type="checkbox" required>：仅当未勾选时阻塞提交；多个同名 checkbox 只需一个勾选即满足
<select required></select>：初始状态满足“未选”，提交时会报错

样式与提示控制：伪类和 `setCustomValidity()`

原生 required 触发失败时，浏览器会显示默认气泡提示（内容不可控），且只在提交时触发。如需更精细控制，得配合 JS：

用 :valid / :invalid 伪类做实时样式反馈（注意：:invalid 在页面加载后立即生效，哪怕用户还没输）
调用 element.setCustomValidity('') 清除自定义错误，setCustomValidity('请填写邮箱') 覆盖默认提示
必须在 input 或 change 事件里动态设置，否则提交时仍用旧提示

&lt;input type=&quot;email&quot; id=&quot;email&quot; required&gt;
<script>
const el = document.getElementById('email');
el.addEventListener('input', () => {
  if (el.validity.typeMismatch) {
    el.setCustomValidity('请输入有效的邮箱格式');
  } else {
    el.setCustomValidity('');
  }
});
</script>