必须用 input[type="radio"] 实现星级选择，因 required 仅校验可聚焦且有 value 的表单控件；隐藏 radio 应用 position: absolute; clip: rect(0 0 0 0) 或 opacity: 0 等保留表单存在感的方式，禁用 display: none/visibility: hidden。
必须用 input[type="radio"] 实现星级选择，否则表单提交时拿不到值，校验直接失效。
为什么 required 对星星组件不起作用
因为浏览器只对「可聚焦且有 value 的表单控件」执行原生 required 校验，而隐藏 radio 的方式如果用了 display: none 或 visibility: hidden，该控件就脱离了可访问性树和表单数据流，required 彻底失效。
- 正确隐藏方式：用
position: absolute; clip: rect(0 0 0 0);或opacity: 0; width: 1px; height: 1px;，保留其在表单中的存在感 - 确保所有
input都有name（同一组必须相同），且至少一个有value属性 -
required要加在任意一个input上（通常加在第一个），不是加在label或容器上
怎么让浏览器原生弹出「请填写此字段」提示
仅当用户尝试提交表单、且当前 name 组中没有任何 input 处于 :checked 状态时，原生提示才会触发。但前提是结构合法：
- 每个
input必须有唯一id，对应label[for]或包裹在label内 - 不能用
div+click模拟，否则checkValidity()返回true，但实际没选中任何值 - 测试方法：用键盘 Tab 切到任一星星，按空格键 —— 应能选中；提交时未选则弹提示
JavaScript 手动校验的可靠写法
不要依赖 document.querySelector('input[name="rating"]:checked') 后判 null，容易漏掉 DOM 未加载完或动态插入的情况。
- 用
form.checkValidity()先走一遍原生流程，它会自动检查required和type - 再手动确认：
const rating = Array.from(form.elements.rating || []).find(i => i.checked)?.value - 若为
undefined，说明没选，可调form.elements.rating[0].reportValidity()强制触发提示 - 注意：动态生成的表格行中，每行的
name必须带唯一后缀，如rating-row-123，否则多行共用一个name会导致互斥选中
最容易被忽略的是：移动端点击无响应，往往是因为给 label 或伪元素加了 pointer-events: none，却忘了把点击穿透留给底层 input —— 此时校验逻辑还在，但用户根本点不中。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
