原生 radio 组无法通过属性统一设置校验提示，需用 javascript 在 submit 事件中调用 setcustomvalidity() 和 reportvalidity() 动态注入自定义文案，并配合 :has() 伪类或 js 实现视觉反馈，确保前后端提示一致。
原生 HTML 表单校验中，radio 组的提示文案不能直接通过属性统一设置——浏览器对整组 required 的提示始终是默认的“请从下列选项中选择一个”这类固定文本，且无法用 title 或 aria-label 替换。但你可以通过 setCustomValidity() 在提交前动态注入自定义提示，实现真正可控、统一的反馈。
用 JavaScript 拦截并重写提示文案
核心思路：监听表单 submit 事件，在触发原生校验前，手动检查 radio 组是否已选；若未选，调用 setCustomValidity() 给任意一个同组 radio 设置提示，再调 reportValidity() 弹出你指定的文案。
- 只需操作组内任一
input[type="radio"]，比如第一个：document.querySelector('input[name="gender"]') - 先清空旧校验：
radio.setCustomValidity("")（避免残留） - 再设新提示：
radio.setCustomValidity("请选择您的性别") - 最后主动触发：
radio.reportValidity()，此时弹窗显示的就是你写的这句话 - 注意：必须在
submit事件中做，且e.preventDefault()后再执行，否则原生校验会先跑一遍并弹默认提示
配合 :invalid 伪类做视觉反馈
仅靠弹窗不够直观。可结合 CSS 让未选中的 radio 组附近显示红色提示文字：
- 给包裹 radio 的容器加 class，例如
<div class="radio-group" data-name="level"> <li>CSS 写：<code>.radio-group:has(input[name="level"]:invalid) .hint { display: block; color: #d32f2f; } - 对应 HTML 中放一个隐藏提示句：
<span class="hint" style="display:none">请选择认证等级</span> - 注意：
:has()在主流现代浏览器已支持，但 Safari 15.4+ 起才稳定，如需兼容旧版可改用 JS 切换 class - 找到对应 radio 组的第一个元素：
const radio = document.querySelector('input[name="gender"]') - 设置并触发：
radio.setCustomValidity(data.message); radio.reportValidity(); - 这样前后端提示文案完全一致，用户不会困惑“为什么前端说‘请选择’，后端说‘为必填项’”
- 给每个 radio 都写
title="请选择性别"：title 不参与表单校验，点击提交时不会出现 - 只靠
required+aria-describedby：屏幕阅读器能读，但原生弹窗仍显示默认文案 - 用
oninvalid事件设提示：oninvalid="this.setCustomValidity('xxx')"：该事件在每个 radio 上分别触发，容易重复设置、逻辑混乱，且首次提交前不生效
服务端返回错误时同步前端提示
当后端校验失败（如用户绕过前端），返回类似 {"field": "gender", "message": "性别为必填项"} 时，前端应复用同一套逻辑展示提示：
不推荐的“伪统一”方式
以下做法看似简单，实则无效或不可靠：
