required属性仅对具“空值语义”的控件生效：text、email、number、tel、url、date、checkbox、radio、select（需含value=""且未selected的option）、textarea；hidden、button、range、color等无效，且必须置于form内、由submit触发校验。
直接加 required 属性就行，但加错位置、选错类型或忽略触发条件，它就完全不工作。
哪些元素和 type 能用 required
只对真正有“空值语义”的控件生效：
-
<input type="text">、<input type="email">、<input type="number">、<input type="tel">、<input type="url">、<input type="date">等文本/日期类输入有效 -
<input type="checkbox">表示必须勾选；<input type="radio">同 name 下任一元素加required，即整组必选 -
<select></select>必须含一个<option value=""></option>，且不能带selected，否则用户不动它就绕过校验 -
<textarea></textarea>直接支持 -
<input type="hidden">、<input type="button">、<input type="range">、<input type="color">加了也无效
为什么点了提交没拦住？常见失效原因
不是属性写错了，而是校验根本没被触发：
- 表单没包在
<form></form>里 ——required必须依附于语义化表单 - 提交按钮是
<button></button>但没写type="submit"（默认是type="button"，不触发校验） - 在
submit事件里写了e.preventDefault()，却没紧接着调form.checkValidity() - 用 JS 直接调
form.submit()—— 这个调用完全跳过所有原生校验 - 字段设了
disabled（校验被跳过）或readonly（仍参与校验） - 移动端旧版 iOS Safari（≤15.4）对
type="file"或<select></select>的required支持不稳定
怎么让提示更可控，又不破坏原生逻辑
浏览器默认提示文案不可改、气泡样式不可定制，但能有限干预：
- 想自定义错误文案：监听
invalid事件，调element.setCustomValidity("手机号不能为空")；但用户填完后必须立刻调element.setCustomValidity("")，否则即使有值也会持续报错 - 避免页面一打开所有必填框就标红：用 CSS
input:invalid:not(:placeholder-shown)，配合placeholder实现“动过才反馈” - 失焦时就提示（而非等提交）：监听
blur，手动调input.reportValidity()，它会弹气泡并返回布尔值 - 服务端永远要二次校验：
required可被禁用、删属性、curl 提交绕过 —— 后端收到""、" "、null都得统一判为缺失
最容易被忽略的是：required 只判断 .value === ""，不 trim，不识别零宽字符，也不管格式对错。填了空格、复制进零宽符、或 select 默认项 value 为空却没禁用，都会导致“明明填了还报错”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
