ant-design/components/form/demo/validate-static.md

115 lines
2.8 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 6
title: 校验提示
---
2015-06-15 20:24:01 +08:00
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
另外为输入框添加反馈图标,设置 `<FormItem>``hasFeedback` 属性值为 `true` 即可。
2015-07-07 11:25:16 +08:00
2015-10-29 08:41:51 +08:00
**注意**: 反馈图标只对 `<Input />` 有效。
2015-06-15 20:24:01 +08:00
2015-10-09 15:44:10 +08:00
````jsx
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(
2015-10-29 08:41:51 +08:00
<Form horizontal>
<FormItem
label="失败校验:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
2015-10-29 08:41:51 +08:00
validateStatus="error"
help="请输入数字和字母组合">
<Input defaultValue="无效选择" 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
label="警告校验:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
2015-10-29 08:41:51 +08:00
validateStatus="warning">
<Input defaultValue="前方高能预警" 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
label="校验中:"
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"
help="信息审核中...">
<Input defaultValue="我是被校验的内容" 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
label="成功校验:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
2015-11-25 17:47:55 +08:00
hasFeedback
2015-10-29 08:41:51 +08:00
validateStatus="success">
<Input defaultValue="我是正文" 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
label="警告校验:"
labelCol={{ span: 5 }}
wrapperCol={{ span: 12 }}
2015-11-25 17:47:55 +08:00
hasFeedback
2015-10-29 08:41:51 +08:00
validateStatus="warning">
<Input defaultValue="前方高能预警" 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
label="失败校验:"
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"
help="请输入数字和字母组合">
<Input defaultValue="无效选择" 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
label="Datepicker"
labelCol={{ span: 5 }}
2016-01-12 11:25:17 +08:00
help>
2015-10-29 08:41:51 +08:00
<Col span="6">
2016-01-12 14:24:42 +08:00
<FormItem validateStatus="error" help="请选择正确日期">
<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>
<FormItem
label="Datepicker"
labelCol={{ span: 5 }}
2016-01-12 14:24:42 +08:00
validateStatus="error"
help>
<Col span="6">
2016-01-12 14:24:42 +08:00
<DatePicker />
</Col>
<Col span="1">
<p className="ant-form-split">-</p>
</Col>
<Col span="6">
2016-01-12 14:24:42 +08:00
<DatePicker />
</Col>
<Col span="19" offset="5">
<p className="ant-form-explain">请选择正确日期</p>
</Col>
</FormItem>
2015-10-29 08:41:51 +08:00
</Form>
, mountNode);
2015-06-15 20:24:01 +08:00
````