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

125 lines
2.9 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 10
title:
zh-CN: 自定义校验
en-US: Customized Validation
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
我们提供了 `validateStatus` `help` `hasFeedback` 等属性,你可以不需要使用 `Form.create``getFieldDecorator`,自己定义校验的时机和内容。
2015-06-15 20:24:01 +08:00
1. `validateStatus`: 校验状态,可选 'success', 'warning', 'error', 'validating'。
2. `hasFeedback`:用于给输入框添加反馈图标。
3. `help`:设置校验文案。
2015-07-07 11:25:16 +08:00
2016-07-31 09:53:51 +08:00
## en-US
We provide properties like `validateStatus` `help` `hasFeedback` to customize your own validate status and message, without using `Form.create` and `getFieldDecorator`.
2016-07-31 09:53:51 +08:00
1. `validateStatus`: validate status of form components which could be 'success', 'warning', 'error', 'validating'.
2. `hasFeedback`: display feed icon of input control
3. `help`: display validate message.
2016-07-31 09:53:51 +08:00
2017-02-13 10:55:53 +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
const formItemLayout = {
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 12 },
},
};
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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Fail"
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-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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Warning"
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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Validating"
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-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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Success"
2015-11-25 17:47:55 +08:00
hasFeedback
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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Warning"
2015-11-25 17:47:55 +08:00
hasFeedback
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
{...formItemLayout}
2016-07-31 09:53:51 +08:00
label="Fail"
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-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"
labelCol={{
xs: { span: 24 },
sm: { span: 5 },
}}
wrapperCol={{
xs: { span: 24 },
sm: { span: 19 },
}}
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>
, mountNode);
2015-06-15 20:24:01 +08:00
````