# 验证码输入 VerificationCode

- 页面: https://jiguang132.com/zh/resources/arco-design/docs/verification-code
- 资源: Arco Design (https://jiguang132.com/zh/resources/arco-design.md)
- 全部指南: https://jiguang132.com/zh/resources/arco-design/docs.md

验证码输入组件，`2.55.0` 支持

## 安装

```bash
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](input#input)['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 |`-`|

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt