required属性仅对<input>、<select>、<textarea>生效，需确保标签原生支持、type正确、按钮为type="submit"，React用required小写，Vue直写即可，JS提交须调reportValidity()，自定义提示需先清空setCustomValidity('')。
HTML表单里 required 属性不生效？先确认是否在 <input>、<select> 或 <textarea> 上直接写了
浏览器原生验证只认这几个标签的 required 属性，写在 <div>、<span> 或自定义组件上完全没反应。它不是 CSS 类，也不靠 JS 注册——就是个布尔属性，存在即生效。
常见错误现象：
– 表单提交时没拦住空字段
– 控制台没报错，但验证像“不存在”
– 用 Vue/React 渲染的表单，required 写了却无效（其实是框架没把属性透传到真实 DOM 元素）
- 确保元素是原生可验证类型：
<input type="text">、<input type="email">、<select>、<textarea> - 不要写
required="false"或required="0"—— 只要属性存在就启用，值是什么无关紧要 - React 中需用
required（小写），不是Required；Vue 模板里直接写required即可，v-model 不影响它的存在
点击按钮触发验证失败？检查是不是用了 type="button" 而不是 type="submit"
原生验证只在表单通过提交行为（比如按回车、点 <button type="submit">）触发。如果用 <button type="button"> + JS 手动调 form.submit()，验证会被跳过。
- 正确做法：按钮必须是
type="submit"，且在<form>内部 - 若必须用 JS 控制流程（比如先异步校验再提交），改用
form.reportValidity()主动触发验证 -
form.checkValidity()只返回布尔值，不弹提示；reportValidity()才会显示浏览器默认气泡提示
验证提示文字没法改？别碰 setCustomValidity() 前没清空旧状态
想自定义提示文案，得用 setCustomValidity()，但它有“粘性”：一旦设过非空字符串，后续所有验证（包括原生 required）都会沿用这个文案，直到你显式调一次 setCustomValidity('')。
立即学习“前端免费学习笔记（深入）”；
- 典型翻车场景：先手动设了错误提示，后来用户输对了，但气泡还显示旧错误
- 安全写法是在每次输入后重置：
input.addEventListener('input', () => input.setCustomValidity('')) - 配合正则校验时，建议统一收口：
input.setCustomValidity(input.validity.valueMissing ? '此项必填' : /邮箱格式/.test(input.value) ? '' : '请输入正确邮箱')
移动端 Safari 或旧版 Android 浏览器里 required 不工作？查 autocomplete 和 inputmode 干扰
某些老版本 iOS Safari 会对 <input autocomplete="off"> 忽略 required；部分 Android 输入法在 inputmode="numeric" 下可能绕过空值检测。
- 避免无意义地加
autocomplete="off"—— 它和required在部分浏览器中存在冲突 - 如需禁用自动填充，改用
autocomplete="new-password"或随机字符串（如autocomplete="nope-123"） - 移动端测试务必真机跑，模拟器常骗人；特别是 iOS 15.4 之前，
required在type="number"上对空值不敏感
required，但浏览器实际执行时会穿插表单提交逻辑、输入法行为、框架渲染时机、甚至操作系统级键盘策略——漏掉其中一环，它就静默失效。 
