SuperAPI AI 工具集

phone-number

前端与建站

查看项目

更新于 10-16 08:38

技能介绍

用途:phone-number 模式解决电话号码的采集问题,让用户以易输入、易检查、支持国际使用的方式填写电话号码,最适用于联系与配送表单、验证与 MFA 设置、面向国际用户的客服或个人资料表单。

适用与避免:当取值是二元、极小或完全受限时,应使用更简单的原生控件;若原生浏览器输入已能很好地解决主要任务,不要自定义行为;如果产品不会因此受益,就不要添加额外的格式化或校验。

实现流程:先确认模式与问题和约束匹配,再从 references/pattern.md 的解剖结构与示例出发,选择最小可行的变体;在叠加视觉打磨前先应用无障碍、性能和交互护栏;使用测试指南在键盘、屏幕阅读器、响应式和失败场景下验证行为。

无障碍护栏:键盘方面,确认电话号码可仅用键盘完成,模式打开、更新或显示额外 UI 时保持焦点顺序合理,并保留高倍缩放下仍可读的可见焦点状态;屏幕阅读器方面,优先使用语义元素,仅在语义不足时添加 ARIA,在正确位置以恰当礼貌级别播报错误、加载或完成等状态变化,必要时用 aria-describedby 或结构化标题连接标签、提示与状态文本;视觉方面,不要仅靠颜色传达严重程度、完成或选中状态。

常见错误:不要对部分输入立即校验,否则会显得惩罚性强且嘈杂,应等字段信息足够后再在失焦、暂停或提交时按规则风险校验;不要让标签、提示和错误彼此分离,应紧密分组并在合适处用 aria-describedby 连接;不要忘记触屏与自动填充行为,桌面端样式会掩盖移动键盘、自动填充和粘贴流程的差异,完成前须在自动填充、粘贴、缩放和屏幕键盘下测试。

相关模式:表单校验 https://uxpatterns.dev/patterns/forms/form-validation、选择输入 https://uxpatterns.dev/patterns/forms/selection-input、文本字段 https://uxpatterns.dev/patterns/forms/text-field。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/forms/phone-number。