2016-03-31 09:40:55 +08:00
|
|
|
---
|
2016-11-02 12:13:00 +08:00
|
|
|
order: 10
|
2016-09-01 11:48:38 +08:00
|
|
|
title:
|
2016-07-31 09:53:51 +08:00
|
|
|
zh-CN: 校验提示
|
|
|
|
en-US: Validation message
|
2016-03-31 09:40:55 +08:00
|
|
|
---
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2016-07-31 09:53:51 +08:00
|
|
|
## zh-CN
|
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
我们为表单控件定义了三种校验状态,为 `<FormItem>` 定义 `validateStatus` 属性即可。
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2016-04-08 09:33:09 +08:00
|
|
|
validateStatus: 'success', 'warning', 'error', 'validating'。
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2015-11-25 17:35:49 +08:00
|
|
|
另外为输入框添加反馈图标,设置 `<FormItem>` 的 `hasFeedback` 属性值为 `true` 即可。
|
2015-07-07 11:25:16 +08:00
|
|
|
|
2016-07-31 09:53:51 +08:00
|
|
|
## en-US
|
|
|
|
|
|
|
|
We provide three kinds of validation status for form. You can use it just define `validateStatus` property on `<FormItem>`.
|
|
|
|
|
|
|
|
validateStatus: 'success', 'warning', 'error', 'validating'。
|
|
|
|
|
|
|
|
To set `hasFeedback` property to `true` enable to display feed icon of input control.
|
|
|
|
|
2017-01-19 15:19:03 +08:00
|
|
|
````__react
|
2015-12-10 16:12:10 +08:00
|
|
|
import { Form, Input, DatePicker, Col } from 'antd';
|
2015-10-29 08:41:51 +08:00
|
|
|
const FormItem = Form.Item;
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2015-10-25 11:35:03 +08:00
|
|
|
ReactDOM.render(
|
2017-01-05 16:57:41 +08:00
|
|
|
<Form>
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Fail"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2015-10-29 08:41:51 +08:00
|
|
|
validateStatus="error"
|
2016-09-22 10:09:22 +08:00
|
|
|
help="Should be combination of numbers & alphabets"
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="unavailable choice" id="error" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-07-07 11:25:16 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Warning"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2016-06-06 13:54:10 +08:00
|
|
|
validateStatus="warning"
|
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="Warning" id="warning" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Validating"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
hasFeedback
|
2015-10-29 08:41:51 +08:00
|
|
|
validateStatus="validating"
|
2016-07-31 09:53:51 +08:00
|
|
|
help="The information is being validated..."
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="I'm the content is being validated" id="validating" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-07-07 11:25:16 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Success"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
hasFeedback
|
2016-06-06 13:54:10 +08:00
|
|
|
validateStatus="success"
|
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="I'm the content" id="success" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-10-25 11:35:03 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Warning"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
hasFeedback
|
2016-06-06 13:54:10 +08:00
|
|
|
validateStatus="warning"
|
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="Warning" id="warning" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-07-07 11:25:16 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="Fail"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
|
|
|
wrapperCol={{ span: 12 }}
|
2015-11-25 17:47:55 +08:00
|
|
|
hasFeedback
|
2015-10-29 08:41:51 +08:00
|
|
|
validateStatus="error"
|
2016-09-22 10:09:22 +08:00
|
|
|
help="Should be combination of numbers & alphabets"
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-01 16:11:06 +08:00
|
|
|
<Input placeholder="unavailable choice" id="error" />
|
2015-10-29 08:41:51 +08:00
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
2016-07-31 09:53:51 +08:00
|
|
|
label="inline"
|
2016-01-27 16:44:50 +08:00
|
|
|
labelCol={{ span: 5 }}
|
2016-06-06 13:54:10 +08:00
|
|
|
help
|
|
|
|
>
|
2015-10-29 08:41:51 +08:00
|
|
|
<Col span="6">
|
2016-07-31 09:53:51 +08:00
|
|
|
<FormItem validateStatus="error" help="Please select the correct date">
|
2016-01-12 14:24:42 +08:00
|
|
|
<DatePicker />
|
|
|
|
</FormItem>
|
2015-10-29 08:41:51 +08:00
|
|
|
</Col>
|
|
|
|
<Col span="1">
|
|
|
|
<p className="ant-form-split">-</p>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
2016-01-12 14:24:42 +08:00
|
|
|
<FormItem>
|
|
|
|
<DatePicker />
|
|
|
|
</FormItem>
|
2015-10-29 08:41:51 +08:00
|
|
|
</Col>
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
2015-12-29 12:08:58 +08:00
|
|
|
, mountNode);
|
2015-06-15 20:24:01 +08:00
|
|
|
````
|