required属性只需写成required即可生效，是布尔属性，存在即生效；仅对input（非hidden等类型）、select、textarea有效；不能替代后端验证，且空格字符串会被前端接受。
required 属性怎么加才生效
HTML 表单必填验证最简单的方式就是给 <input>、<select></select> 或 <textarea></textarea> 加上 required 属性，浏览器原生就会拦截空提交并弹出提示。但要注意：它只在表单提交（submit 事件）时触发，不监听实时输入或失去焦点。
常见错误是把 required 写成 required="true" 或 required="required" —— 实际上它是布尔属性，写成 required 就够了，值不重要，存在即生效。
-
<input type="text" name="username" required>✅ 正确 -
<input type="text" name="username" required="false">❌ 即使写 false 也仍被当作必填 -
<input type="text" name="username" required="">✅ 空字符串也生效
哪些元素支持 required 属性
不是所有表单控件都支持 required。它只对“可填写且有值概念”的控件有效：
- ✅
<input>（type不为hidden、button、submit、reset、image） - ✅
<select></select>（但需注意：默认<option></option>不能带空值又设selected，否则会绕过验证） - ✅
<textarea></textarea> - ❌
<input type="checkbox">和<input type="radio">不直接支持required（它们靠 JS 或name分组 +:checked检查）
比如多选框组必须至少选一个？得用 JS 判断 document.querySelectorAll('input[name="hobbies"]:checked').length，required 对它没用。
required 验证失败时的提示和样式控制
浏览器默认会在提交失败时聚焦第一个未填字段，并显示气泡提示（如 Chrome 显示“请填写此字段”）。这个提示文案不可通过 HTML 属性修改，但可通过 setCustomValidity() 覆盖：
<input type="email" id="email" required><script>
const emailInput = document.getElementById('email');
emailInput.addEventListener('invalid', e => {
e.target.setCustomValidity('邮箱格式不对，或者你忘了填');
});
emailInput.addEventListener('input', e => {
e.target.setCustomValidity(''); // 清空自定义错误，否则一直报错
});
</script>
另外，CSS 可用伪类 :invalid 和 :valid 控制样式，但注意：:invalid 在页面加载后立即匹配（哪怕用户还没输），所以建议配合 :user-invalid（Chrome/Edge 102+、Firefox 119+ 支持）或 JS 添加 class 来避免误导性红边。
required 不能替代后端验证
前端 required 完全可被禁用 JavaScript、绕过表单提交（比如用 fetch 直接发请求）、或手动删掉属性来跳过。它只是用户体验层的辅助，不是安全机制。
后端必须独立校验字段是否存在、非空、类型正确。比如 Node.js 的 Express 中不能只信 req.body.username，要显式检查：
if (!req.body.username || typeof req.body.username !== 'string' || req.body.username.trim() === '') {
return res.status(400).json({ error: '用户名为必填项' });
}
容易被忽略的一点是：空格字符串（" "）在 HTML 中会被 required 接受，但业务上往往算无效输入 —— 这种逻辑只能靠 JS trim 后判断，或后端二次清洗。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
