跳到主要内容
前端术语库

UI 组件 · 表单输入

验证码输入框

OTP Input

也叫：验证码框、短信验证码输入、分格输入框、动态码输入、Verification Code Input、PIN Input

填短信或邮件验证码的一排小格子，每格一位数字，输完一格自动跳到下一格，常见于登录、注册和敏感操作前的二次验证。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个短信验证码页：标题「输入验证码」，下面一行灰字「6 位验证码已发送至 138 **** 1234」和「更换手机号」链接。中间是 6 个 48×56px 的方格，间距 8px，数字 24px 居中；当前格边框加深并显示闪烁的光标。输入一位自动跳到下一格，退格回到上一格，粘贴 6 位数字一次填满；手机上调起数字键盘，输入框加 `autocomplete="one-time-code"` 支持自动填充。填满后自动校验并显示加载；验证码错误时 6 格一起标红，下方提示「验证码错误，请重新输入」并清空。格子下方显示「59 秒后重新发送」倒计时，结束后变成可以点击的「重新发送」。

发给

01判断

你的内容是这样吗？

对照两列，确认验证码输入框是不是你要找的。

符合这些情况，用验证码输入框

  • 手机号或邮箱登录、注册时，输入收到的短信或邮件验证码
  • 修改密码、绑定银行卡、大额付款这类敏感操作之前的二次验证
  • 两步验证，输入身份验证器 App 里的 6 位动态码

是这些情况，换成别的

  • 密码、邀请码这类长度不固定、可能有字母的内容，用普通输入框

    改用输入框

  • 防机器人的图形验证码或滑块验证，那是另一类组件

  • 超过 8 位的长串（例如激活码），拆成格子反而难输，用普通输入框分组显示

    改用输入框

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    每格是一个独立的输入框却不支持粘贴，从短信里复制的 6 位验证码只填进了第一格

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    没有重新发送的倒计时和入口，收不到短信的用户只能刷新页面

  3. 03

    输错后格子只是抖一下，不说是填错了还是过期了，也不清空

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

由说明文字（验证码发到了哪个手机号或邮箱）、一排 4~6 个单字符格子、重新发送倒计时和提交按钮组成，错误提示显示在格子下方。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1一排 4~6 个等宽的小方框，每个里面只有一个大号数字
  2. 2方框上方有「已发送至 138 **** 1234」这样的说明
  3. 3方框下方有「59 秒后重新发送」的倒计时文字

04解释

详细解释

验证码输入框把 4~6 位的一次性验证码拆成一排等宽的小方格，每格只放一个数字。用户输完一位，光标自动跳到下一格，按退格回到上一格；从短信里复制整串验证码粘贴进来，要一次填满所有格子。手机上要调起数字键盘，并支持系统自动填充短信验证码（autocomplete="one-time-code"）。旁边通常配一行「验证码已发送至 138 **** 1234」和「59 秒后重新发送」的倒计时。

它和普通 输入框 的区别只在外观和行为：本质上还是填一串数字，所以很多靠谱的实现是一个隐藏的输入框加一排只负责显示的格子，这样粘贴、自动填充和读屏都不会出问题。它也不是图形验证码（看图输字母、拖滑块的防机器人验证），那是另一类东西。

格子数要和实际验证码位数一致，格子要够大（手机上至少 40px 宽）。填满最后一位可以自动提交，但要显示加载状态并防止重复提交。输错时整组标红，说清楚是填错了还是过期了，并清空让人重输。倒计时结束前「重新发送」不可点，还要给收不到短信的人留备用方式（语音验证码、换成邮箱）。

开发者信息
术语 ID
component-otp-input
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • input[autocomplete="one-time-code"]
  • .ant-otp
  • [data-input-otp-container]
  • [data-input-otp]
  • [data-slot="input-otp"]
  • [data-slot="input-otp-group"]
  • .n-input-otp
  • .arco-verification-code
  • .van-password-input
  • .chakra-pin-input
  • .mantine-PinInput-root
  • [class*="MuiOtpInput-Box"]
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • otp-input
  • otp-inputs
  • otp
  • otp-field
  • verification-code
  • verify-code
  • code-input
  • code-inputs
  • pin-input
  • sms-code
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • InputOTP
  • OTPInput
  • OtpInput
  • PinInput
  • VerificationCode
  • CodeInput
  • PinField
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
  • 重复子项
优先级
3 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30