required属性仅对input（除hidden、button等）、select、textarea生效，提交时自动校验空值并阻止提交，提示文案和样式不可自定义，空格视为已填，不支持条件必填或失焦校验。

required 属性是 HTML 原生最简单、最直接的必填校验方式，只需加在表单控件（如 input、select、textarea）上，浏览器就会在提交时自动检查该字段是否为空。

哪些元素支持 required 属性

它适用于以下常见表单控件：

• <input type="text">、<input type="email">、<input type="tel">、<input type="number"> 等文本类输入框
• <textarea></textarea>
• <select></select>（注意：需配合一个空值 <option value=""></option> 才能生效）

如何正确使用 required

直接在标签中添加 required 即可，它是个布尔属性，无需赋值：

<input type="text" name="username" required><textarea name="message" required></textarea><select name="category" required><option value="">请选择分类</option>
<option value="news">新闻</option>
<option value="help">帮助</option></select>

如果用户未填写就点击提交，浏览器会自动阻止提交，并弹出提示（如“请填写此字段”），样式和文案由浏览器决定，不可自定义。

html-ppt-to-pdf

将使用 `

` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。

下载

注意事项和常见问题

几个容易出错的地方：

• required 对 type="hidden"、type="button"、type="submit" 等无效
• input type="checkbox" 或 radio 使用 required 时，表示“至少选中一个”，不是“必须勾选这个”
• 空格、换行符会被视为有效输入，所以 " " 不触发校验失败；如需严格校验，需配合 JavaScript 或 pattern
• 不支持条件必填（比如“手机号和邮箱至少填一个”），这种逻辑必须用 JS 实现

与 JavaScript 配合增强体验

原生 required 是基础保障，但可以结合 JS 提升交互友好度：

• 用 checkValidity() 主动检测：document.querySelector('input').checkValidity()
• 用 setCustomValidity() 替换默认提示文案
• 监听 invalid 事件，在提交前做额外处理或样式反馈

不过，只要目标只是“非空即通过”，required 单独使用就足够可靠且兼容性好（IE10+ 支持）。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！