1 | # Form
|
2 |
|
3 | ## 代码演示
|
4 |
|
5 | ## API
|
6 |
|
7 | > 基于 [rc-form](http://react-component.github.io/form/)。
|
8 |
|
9 | ### Form
|
10 |
|
11 | |参数|说明|类型|默认值|
|
12 | |:---|:-----|:----|:------|
|
13 | |form|经过`Form.createForm`包装后的组件,都带有`this.props.form`属性|Object|-|
|
14 | |prefixCls|类名前缀|String|u-form|
|
15 | |className|类名|String|-|
|
16 | |onSubmit|提交事件|Function|-|
|
17 | |style|样式|Object|-|
|
18 |
|
19 |
|
20 | ### FormItem
|
21 |
|
22 | |参数|说明|类型|默认值|
|
23 | |:---|:-----|:----|:------|
|
24 | |prefixCls|类名前缀|String|u-form|
|
25 | |className|类名|String|-|
|
26 | |style|样式|Object|-|
|
27 |
|
28 |
|
29 | ### this.props.form 常用 api
|
30 |
|
31 | |参数|说明|类型|默认值|
|
32 | |:---|:-----|:----|:------|
|
33 | |getFieldProps|配置受控表单元素,经过此方法包装的表单元素才可以使用`this.props.form`中的其它方法,此表单元素需要有`onChange`方法,并且`onChange`回调的第一个值为此表单元素当前值|-|-|
|
34 | |getFieldDecorator|类似`getFieldProps`|-|-|
|
35 | |getFieldsValue([fieldNames: String[]])|根据`name`获取多个表单元素的值|-|-|
|
36 | |getFieldValue(fieldName: String)|根据`name`获取单个表单元素的值|-|-|
|
37 | |getFieldInstance(fieldName: String)|根据`name`获取表单元素|-|-|
|
38 | |setFieldsValue(obj: Object)|根据`name`设置多个表单元素的值|-|-|
|
39 | |setFieldsInitialValue(obj: Object)|根据`name`设置多个表单元素的默认值|-|-|
|
40 | |setFields(obj: Object)|根据`name`设置多个表单元素的属性|-|-|
|
41 | |validateFields([fieldNames: String[]], [options: Object], callback: (errors, values) => void)|校验表单|-|-|
|
42 | |getFieldsError(names)|获取多个表单元素的错误信息|-|-|
|
43 | |getFieldError(name)|获取单个表单元素的错误信息|-|-|
|
44 | |isFieldValidating(name: String)|单个表单元素是否正在校验|-|-|
|
45 | |isFieldsValidating(names: String[])|多个表单元素是否正在校验|-|-|
|
46 | |resetFields([names: String[]])|重置表单|-|-|
|
47 |
|
48 | #### getFieldProps(name, option): Object { [valuePropName], [trigger], [validateTrigger] }
|
49 |
|
50 | |参数|说明|类型|默认值|
|
51 | |:---|:-----|:----|:------|
|
52 | |name|设置表单元素name,不可以重复|String|-|
|
53 | |option.valuePropName|设置表单元素取值的属性|String|value|
|
54 | |option.initialValue|设置默认值|any|-|
|
55 | |option.validateTrigger|设置校验时机|String|onChange|
|
56 | |option.rules|设置校验规则|Object|-|
|
57 | |option.validateFirst|当第一个校验失败时候是否继续校验下一个校验规则|boolean|false|
|
58 |
|
59 |
|
60 | #### rules 常用
|
61 |
|
62 | > 参考 [async-validator](https://github.com/yiminghe/async-validator)
|
63 |
|
64 | | 参数 | 说明 | 类型 | 默认值 |
|
65 | |:---|:-----|:----|:------|
|
66 | | enum | 枚举类型 | string | - |
|
67 | | len | 字段长度 | number | - |
|
68 | | max | 最大长度 | number | - |
|
69 | | message | 校验文案 | string | - |
|
70 | | min | 最小长度 | number | - |
|
71 | | pattern | 正则表达式校验 | RegExp | - |
|
72 | | required | 是否必选 | boolean | `false` |
|
73 | | transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
|
74 | | type | 内建校验类型,[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
|
75 | | validator | 自定义校验(注意,callback 必须被调用) | function(rule, value, callback) | - |
|
76 | | whitespace | 必选时,空格是否会被视为错误 | boolean | `false` | |
\ | No newline at end of file |