Form 表单

开发指南

何时使用

表单布局、校验、数据提交操作时用到。 组件的设计思想可以看这篇文章 https://zhuanlan.zhihu.com/p/56280821

注意事项

  • 组件不要使用关键字 nodeName 作为 name、id

  • Form 默认使用 size=medium, 并且会控制 FormItem 内所有组件的size。 如果想修改组件的size <FormItem size="small" >

  • 在垂直表单中如果文字(一般 <p> 标签)或者组件向上偏离,可以通过 className="next-form-text-align" 辅助调整

  • 必须是被 <FormItem>直接包裹的组件才能展示校验错误提示。如果界面不展示错误信息,请检查是否有多个层级。 比如 <FormItem><div><Input/></div></FormItem> 是无法展示校验信息的。

Fixed Name

something

基本

拉伸浏览器的时候 label 宽度不变。

水平

注册

验证码获取

Check your password


Check your password

尺寸

size 会强制设置 FormItem 下的所有组件的 size

error
error

标签在上

size 会强制设置 FormItem 下的所有组件的 size

error


Password is required!

标签内嵌

通过设置labelAlign="inset" (只适用于 Input、Select 组件,其他组件不适用)

Label Position

自定义布局

标签位置:上、左

回车提交

需要 Form 里面有 htmlType="submit" 的元素

something

响应式

可以通过配置 labelCol wrapperColGrid.Col 响应式属性实现响应式

Please enter a numeric and alphabetic string
Information Checking...
Please select the correct date
Please select the correct time
Please select a country
error

校验提示

<FormItem> 定义 state 属性控制三种校验状态。

0/20

校验

基本的表单校验例子。

校验

自定义错误。

Hello

复杂功能(Field)

配合 Field 可以实现较复杂功能

The quick brown fox jumps over the lazy dog.

Link

Something in here
0100

表单组合

展示和表单相关的其他组件。

email:

配合 redux 使用

redux中结合 componentWillReceiveProps setValues 使用, 配合 Field 使用

email:

手动设置错误

redux中结合 componentWillReceiveProps setErrors 使用, 配合 Field 使用更加方便

上传图片

无障碍

对于必填项,在组件中要设置aria-required属性,并通过视觉设计上的高亮提示用户。

API

Form

参数说明类型默认值
inline内联表单Boolean-
size单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。

可选值:
'medium'(中)
'small'(小)
Enum'medium'
labelAlign标签的位置

可选值:
'top'(上)
'left'(左)
'inset'(内)
Enum'left'
labelTextAlign标签的左右对齐方式

可选值:
'left'(左)
'right'(右)
Enum-
fieldnew Field(this) 初始化后,直接传给 Form 即可 用到表单校验则不可忽略此项any-
saveField保存 Form 自动生成的 field 对象

签名:
Function() => void
Functionfunc.noop
labelCol控制第一级 Item 的 labelColObject-
wrapperCol控制第一级 Item 的 wrapperColObject-
onSubmitform内有 htmlType="submit" 的元素的时候会触发

签名:
Function() => void
Functionfunction preventDefault(e) { e.preventDefault(); }
children子元素any-
value表单数值Object-
onChange表单变化回调

签名:
Function(values: Object, item: Object) => void
参数:
values: {Object} 表单数据
item: {Object} 详细
item.name: {String} 变化的组件名
item.value: {String} 变化的数据
item.field: {Object} field 实例
Functionfunc.noop
component设置标签类型String/Function'form'

Form.Item

手动传递了 wrapCol labelCol 会使用 Grid 辅助布局; labelAlign='top' 会强制禁用 Grid

参数说明类型默认值
labellabel 标签的文本ReactNode-
size单个 Item 的 size 自定义,优先级高于 Form 的 size, 并且当组件与 Item 一起使用时,组件自身设置 size 属性无效。

可选值:
'small', 'medium'
Enum-
labelCollabel 标签布局,通 <Col> 组件,设置 span offset 值,如 {span: 8, offset: 16},该项仅在垂直表单有效Object-
wrapperCol需要为输入控件设置布局样式时,使用该属性,用法同 labelColObject-
help自定义提示信息,如不设置,则会根据校验规则自动生成.ReactNode-
extra额外的提示信息,和 help 类似,当需要错误信息和提示文案同时出现时,可以使用这个。 位于错误信息后面ReactNode-
validateState校验状态,如不设置,则会根据校验规则自动生成

可选值:
'error'(成功)
'success'(失败)
'loading'(校验中)
Enum-
hasFeedback配合 validateState 属性使用,是否展示 success/loading 的校验状态图标, 目前只有Input支持Booleanfalse
childrennode 或者 function(values)ReactNode/Function-
labelAlign标签的位置

可选值:
'top'(上)
'left'(左)
'inset'(内)
Enum-
labelTextAlign标签的左右对齐方式

可选值:
'left'(左)
'right'(右)
Enum-
required表单校验 不能为空Boolean-
asteriskrequired 的星号是否显示Boolean-
requiredMessagerequired 自定义错误信息String-
requiredTriggerrequired 自定义触发方式String/Array-
min表单校验 最小值Number-
max表单校验 最大值Number-
minmaxMessagemin/max 自定义错误信息String-
minmaxTriggermin/max 自定义触发方式String/Array-
minLength表单校验 字符串最小长度 / 数组最小个数Number-
maxLength表单校验 字符串最大长度 / 数组最大个数Number-
minmaxLengthMessageminLength/maxLength 自定义错误信息String-
minmaxLengthTriggerminLength/maxLength 自定义触发方式String/Array-
length表单校验 字符串精确长度 / 数组精确个数Number-
lengthMessagelength 自定义错误信息String-
lengthTriggerlength 自定义触发方式String/Array-
pattern正则校验any-
patternMessagepattern 自定义错误信息String-
patternTriggerpattern 自定义触发方式String/Array-
format表单校验 四种常用的 pattern

可选值:
'number', 'email', 'url', 'tel'
Enum-
formatMessageformat 自定义错误信息String-
formatTriggerformat 自定义触发方式String/Array-
validator表单校验 自定义校验函数

签名:
Function() => void
Function-
validatorTriggervalidator 自定义触发方式String/Array-
autoValidate是否修改数据时自动触发校验Boolean-

Form.Submit

继承 Button API

参数说明类型默认值
onClick点击提交后触发

签名:
Function(value: Object, errors: Object, field: class) => void
参数:
value: {Object} 数据
errors: {Object} 错误数据
field: {class} 实例
Functionfunc.noop
validate是否校验/需要校验的 name 数组Boolean/Array-
field自定义 field (在 Form 内不需要设置)Object-

Form.Reset

继承 Button API

参数说明类型默认值
names自定义重置的字段Array-
onClick点击提交后触发

签名:
Function() => void
Functionfunc.noop
toDefault返回默认值Boolean-
field自定义 field (在 Form 内不需要设置)Object-

Form.Error

自定义错误展示

参数说明类型默认值
name表单名String/Array-
field自定义 field (在 Form 内不需要设置)Object-
children自定义错误渲染, 可以是 node 或者 function(errors, state)ReactNode/Function-

关于校验

  • 建议一个FormItem放一个组件, 方便错误提示跟随组件展示

  • 组件必须是FormItem的第一层子元素

  • 详细校验请查看 Field 组件文档的 rules

复杂表单场景

如果您的表单场景非常复杂,比如动态渲染,大量字段,复杂数据结构,复杂联动校验,可以考虑使用 uform,uform已经封装了所有fusion组件,保证您开箱即用