2015-07-07 11:25:16 +08:00
|
|
|
# 校验提示
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
- order: 6
|
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
|
|
|
|
2015-10-25 11:35:03 +08:00
|
|
|
validateStatus: ['success', 'warning', 'error', 'validating']。
|
2015-06-15 20:24:01 +08:00
|
|
|
|
2015-10-29 08:41:51 +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
|
2015-10-29 08:41:51 +08:00
|
|
|
import {Form, Input, Datepicker, Row, Col} from "antd";
|
|
|
|
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}}
|
|
|
|
validateStatus="error"
|
|
|
|
help="请输入数字和字母组合">
|
|
|
|
<Input value="无效选择" id="error" />
|
|
|
|
</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}}
|
|
|
|
validateStatus="warning">
|
|
|
|
<Input value="前方高能预警" id="warning" />
|
|
|
|
</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}}
|
|
|
|
hasFeedback={true}
|
|
|
|
validateStatus="validating"
|
|
|
|
help="信息审核中...">
|
|
|
|
<Input value="我是被校验的内容" id="validating" />
|
|
|
|
</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}}
|
|
|
|
hasFeedback={true}
|
|
|
|
validateStatus="success">
|
|
|
|
<Input value="我是正文" id="success" />
|
|
|
|
</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}}
|
|
|
|
hasFeedback={true}
|
|
|
|
validateStatus="warning">
|
|
|
|
<Input value="前方高能预警" id="warning" />
|
|
|
|
</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}}
|
|
|
|
hasFeedback={true}
|
|
|
|
validateStatus="error"
|
|
|
|
help="请输入数字和字母组合">
|
|
|
|
<Input value="无效选择" id="error" />
|
|
|
|
</FormItem>
|
2015-10-09 15:44:10 +08:00
|
|
|
|
2015-10-29 08:41:51 +08:00
|
|
|
<FormItem
|
|
|
|
label="Datepicker 失败:"
|
|
|
|
labelCol={{span: 5}}
|
|
|
|
validateStatus="error">
|
|
|
|
<Col span="6">
|
|
|
|
<Datepicker />
|
|
|
|
</Col>
|
|
|
|
<Col span="1">
|
|
|
|
<p className="ant-form-split">-</p>
|
|
|
|
</Col>
|
|
|
|
<Col span="6">
|
|
|
|
<Datepicker />
|
|
|
|
</Col>
|
|
|
|
<Col span="19" offset="5">
|
|
|
|
<p className="ant-form-explain">请输入正确选项</p>
|
|
|
|
</Col>
|
|
|
|
</FormItem>
|
|
|
|
</Form>
|
2015-10-09 15:44:10 +08:00
|
|
|
, document.getElementById('components-form-demo-validate'));
|
2015-06-15 20:24:01 +08:00
|
|
|
````
|