html5 表单校验通过后用 :valid 伪类配合 css 显示绿色对勾图标✅和“格式正确”文案，无需 javascript；对勾用 position: absolute 精准右对齐并设 pointer-events: none，文案用 input:valid + .checkmark + .valid-hint 控制显隐。
HTML5 表单校验通过后显示绿色对勾图标（✅）和提示文案，核心是**不依赖 JavaScript**，用原生伪类 + CSS 控制视觉反馈，同时保持语义清晰、可维护性强。
用 :valid 伪类自动触发对勾显示
浏览器在输入值满足 required、type="email"、pattern 等规则时，会自动为 <input> 设置 :valid 状态。我们利用这个状态做样式切换：
- 确保 HTML 结构中，对勾图标（如
<span class="checkmark">✅</span>）紧跟在<input>后面，且二者同属一个position: relative容器 - 用相邻兄弟选择器
input:valid + .checkmark控制显示，避免 JS 干预 - 对勾默认隐藏：
.checkmark { display: none; }；校验通过时才显示：input:valid + .checkmark { display: inline-block; }
右侧精准定位对勾图标（不飘出、不遮挡）
常见问题是对勾位置错乱或挤出输入框。解决方式很明确：
- 给输入框父容器加
position: relative - 对勾元素设为
position: absolute，右对齐、垂直居中：right: 12px; top: 50%; transform: translateY(-50%); - 加
pointer-events: none防止遮挡输入框焦点 - 字体大小建议设为
1.2em，颜色用#4CAF50（标准绿色），和错误状态的红色形成一致语义
配套显示“校验通过”文案（可选但推荐）
仅图标不够明确，尤其对新用户或无障碍场景。建议加一句轻量文案，比如“格式正确”或“✓ 已验证”：
- 文案放在对勾旁或下方，用
<small class="valid-hint"></small>包裹 - 同样用
input:valid + .checkmark + .valid-hint控制显隐 - 文案颜色比图标稍淡（如
#666），字号小一号，避免喧宾夺主 - 注意：不要在
:invalid状态下也显示该文案——它只属于“通过”状态，和错误提示文案分属不同通道
避免干扰用户操作的细节处理
对勾和文案要“存在感恰到好处”，不能抢输入焦点或影响交互：
- 对勾出现时机：等用户完成一次有效输入（如输完邮箱按 Tab 或失焦），不是实时响应每个字符
- 若字段有
required但为空，:valid不成立，对勾不显示——这是正确行为，无需额外 JS 判断 - 清空输入后，自动退回到无对勾、无文案状态，无需手动 removeClass 或清 DOM
- 移动端需测试点击区域：确保输入框右侧留够 44px 触控热区，对勾本身不缩小可点区域
