验证码输入 VerificationCode

验证码输入组件，2.55.0 支持

安装

npm install @arco-design/web-react@2.66.18

在入口引入 @arco-design/web-react/dist/css/arco.css，用 ConfigProvider 设置语言。React 19 项目还需在入口最先引入 @arco-design/web-react/es/_util/react-19-adapter，否则 Message、Modal 等命令式 API 无法渲染。

示例

基本用法：基本用法
不同状态：禁用状态、错误状态
密码模式：指定 masked = true，可开启密码模式
自定义分隔符：指定 separator 可以自定义渲染分隔符
配合表单使用：配合表单使用实现校验
校验与格式化输入：通过 validate 校验输入。此外，可以返回非布尔类型来将用户输入的字符串为特定的格式。
useVerificationCode：通过 useVerificationCode 自定义验证码组件

示例来自 Arco Design 官方仓库（MIT），固定在 npm 2.66.18 对应的提交；部分示例使用在线图片或上传地址，预览中网络请求被禁用。

API

VerificationCode

2.55.0 支持

参数名	描述	类型	默认值
disabled	禁用	boolean	`-`
masked	是否是密码模式	boolean	`-`
readOnly	只读	boolean	`-`
length	验证码的长度，根据长度渲染对应个数的输入框	number	`6`
defaultValue	默认值	string	`-`
value	验证码输入框的值，受控模式	string	`-`
size	尺寸	InputProps['size']	`-`
status	状态	'error'	`-`
className	节点类名	string \| string[]	`-`
style	节点样式	CSSProperties	`-`
onChange	输入值改变时触发的回调	(value: string) => void	`-`
onFinish	输入框都被填充后触发的回调	(value: string) => void	`-`
separator	分隔符。可在不同索引的输入框后自定义渲染分隔符	(data: { index: number; character: string }) => ReactNode	`-`
validate	校验函数，用户输入值改变时触发	(data: { inputValue: string; value: string; index: number }) => boolean \| string	`-`