---
title: From 表单
description: 单选框代表从一组互斥的选项中仅选择一个选项。
isComponent: true
usage: false
spline: navigation
author: swimly
---

## 基本用法

表单主要用来收集用户的输入信息，并对录入信息进行整体校验，表单通常包含各种表单项，例如：输入框，选择器，单选，多选，开关
等等，并且还提供各种形式的布局，通过`layout`可设置表单项的排列方式，可选：`inline`，`vertical`。

{{ base }}

## 文本设置

通过`label`可设置表单项左侧的文本信息，通过`labelAlign`可设置文本水平对齐方式，可选：`left`，`top`，`right`，通
过`labelWidth`还可设置文本容器的宽度。

> 提示：当设置`labelAlign`为 top 的时候，再设置`labelWidth`没实际作用。

{{ label }}

## 表单重置

表单重置分三类：全部数据重置为空、全部数据重置为初始值、重置任意数据为任意值，通过`resetType`进行设置，可选
：`initial`，`empty`。

{{ reset }}

## 表单状态

通过图标及提示文字的形式来提示用户对表单的填写，校验状态又：成功、失败、警告等等，通过`successBorder`控制是否显示校验成
功后的绿色边框，通过`statusIcon`控制校验图标，`FormItem`的优先级大于`Form`，值为`true`显示默认图标，值为`false`时不显示
图标，还可通过此属性自定义图标。

{{ status }}

## 校验规则

表单默认的校验规则有
：`date`，`url`，`email`，`required`，`boolean`，`max`，`min`，`len`，`number`，`enum`，`idcard`，`telnumber`，`pattern`，
其中`date`，`url`，`email`等校验规则参数请参考
：[https://github.com/validatorjs/validator.js](https://github.com/validatorjs/validator.js)

{{ format }}

## 自定义校验

支持自定义配置校验规则，也支持配置异步校验。同一个字段的同一个校验规则可以设定多种不同的校验结果，通过`validator`自定义
校验函数，支持异步返回结果`Promise`，返回结果可以设置不同的校验结果、校验结果类型、校验结果信息。

> 示例一：`validator: (val) => { result: !!val, message: '该项必填', type: 'error' }`

> 示例二：`validator: (val) => { result: !!val, message: '该项必填', type: 'error' }`，如果是异步校验，必须返回所有情况
> 的校验结果，不能只返回 `resolve(false)` 校验不通过的情况，还需要注意返回 `resolve(true)` 校验通过的情况。

{{ customFormat }}

## 清空校验结果

在一些复杂的业务场景中，会涉及到自主控制校验结果的显示与否，此时使用实例方法 `clearValidate` 来清空校验结果。可以清空全
部字段的校验结果，也可以清除部分字段的校验结果。

{{ clearFormat }}

## 统一校验表单

`FormRule` 中的每个规则都要默认校验信息，支持通过 `Form.errorMessage` 覆盖默认校验信息，也支持全局配置（ConfigProvider）
各个规则的校验信息。

{{ settingFormat }}

## 复杂数据校验

很多时候，表单数据的类型往往不仅仅是单纯的对象，还包含着数组、对象数组嵌套等。表单支持这些复杂数据类型的校验。

{{ fuza }}

## 自定义校验信息

通过 `validateMessage` 属性可以自定义表单校验信息提示，主要用于非组件内部的校验信息呈现，如：表单初次呈现的远程校验结果
。如果要启动组件内部的校验功能，该值必须设置为空。

{{ formatMessage }}

## 禁用

通过 `disabled` 属性禁用整个表单项。对于自定义组件，可以使用 `formControlledComponents` 设置为允许 Form 代理禁用状态。

{{ disabled }}
