表单 / 15
校验 · 分组 · 验证码
把"填错了"这件事说清楚：错误怎么标、错误汇总放哪里、超长表单怎么分组、多步流程怎么表达进度，以及三道安全验证怎么写进表单里。
必填校验与错误提示
.req / .help / .err / .input.is-error错误汇总 + 逐项标注
有 3 个字段需要修改
企业名称重复、联系电话格式错误、开户银行未填写。
校验通过，可正常提交。
该营业执照号已被占用，请核对后重填
请输入 11 位手机号或带区号的固定电话
该项为必填
提交时会聚焦到第一个出错的字段
校验时机与规则文案
| 字段 | 规则 | 触发时机 |
|---|---|---|
| 企业名称 | 2–60 字符，不可与已有企业重名 | 失焦时 |
| 营业执照号 | 统一社会信用代码 18 位 | 失焦时 |
| 联系电话 | 手机号或带区号固话 | 失焦时 |
| 开户银行 | 必填 | 提交时 |
| 发票邮箱 | 邮箱格式 | 失焦时 |
失焦校验：只校验当前字段，不打断正在输入的内容。
提交校验：全量校验，把汇总提示置于表单顶部。
文案规则：说清"错在哪 + 怎么改"，不要只写"格式错误"。
通过
警告：不影响提交
错误：阻断提交
分组表单 · fieldset
fieldset / legend分步表单
.steps + .step
1
填写企业信息
2
上传资质材料
3
确认并提交
4
等待审核
第 2 步 · 上传资质材料
点击上传营业执照
JPG / PNG / PDF，不超过 10MB
点击上传身份证明
正反面各一张，需清晰可见
材料仅用于资质审核，审核完成后 30 天内自动删除
安全验证
.captcha / .slider-check / data-countdown图形验证码
7KM4
7KM4
滑块验证 · 拖动通过
已通过状态（静态呈现）
拖到最右侧即通过：填充条铺满、滑块变绿、提示文案改为"验证通过"，同时弹出 Toast。
短信验证码
没收到？检查是否被拦截
两种校验入口
自动跳到下一格
退格回到上一格
支持整段粘贴
颜色选择器
.color-swatches / .swatch预设色板
同一容器内互斥选中，当前项放大并加深色描边；选中的色值会同步到右侧预览。
自定义色值
对比度检查
Aa
白色文字对比度
4.8 : 1
达到 WCAG AA 正文标准