HTML5的required属性不可靠，仅提供基础客户端校验且可被绕过；必须配合checkValidity()和reportValidity()手动控制验证时机，并注意type差异及reportValidity()生效条件。
HTML5中required属性是否足够可靠？
不够。它只提供基础的客户端即时校验，不触发提交前完整验证逻辑，且可被绕过（如禁用JS、手动删除属性、直接调用form.submit()）。真实项目中必须配合checkValidity()和reportValidity()手动控制验证时机。
如何在表单提交前强制触发所有必填校验？
不要依赖默认提交行为自动校验。监听submit事件，调用event.preventDefault()，再显式调用form.checkValidity()判断，失败时用form.reportValidity()统一展示浏览器原生提示。
<form id="myForm">
<input type="text" name="username" required>
<button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');
form.addEventListener('submit', (e) => {
e.preventDefault();
if (form.checkValidity()) {
// 执行真实提交逻辑，例如 fetch
} else {
form.reportValidity(); // 触发所有必填/格式错误的气泡提示
}
});
</script>
required对不同type的输入框生效逻辑差异
不是所有type都按“空值”判断必填。例如：type="number"在输入非数字（如"a"）时值为""，但浏览器仍认为它“已填写”，不会报必填错误；type="date"未选择时值为""，会触发required校验；type="checkbox"需至少一个被勾选才通过；type="radio"同组中任一被选即通过。
-
type="email"：空字符串触发required，但"abc"不触发type校验（仅required） -
type="url"：空字符串触发required，"http://a"才通过type校验 -
select下拉框：需设置<option value="">请选择</option>并设required，否则第一个选项默认被选中导致绕过
为什么reportValidity()有时不显示错误提示？
常见原因有三个：元素不在当前文档树中（如动态插入但未appendChild）、元素被display: none或visibility: hidden隐藏（浏览器不渲染提示）、该元素本身没有required或其他约束属性（比如只给父form加required无效）。务必确认目标input具备校验属性且处于可交互状态。
立即学习“前端免费学习笔记（深入）”；
复杂表单里容易忽略的是：动态生成的字段如果没及时绑定required或没插入DOM，reportValidity()就完全静默——它不会报错，也不会提示，只会跳过。
