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

155 lines
3.9 KiB
Markdown
Raw Normal View History

2016-03-31 09:40:55 +08:00
---
order: 11
2016-08-23 21:00:35 +08:00
title:
2016-07-31 09:53:51 +08:00
zh-CN: 校验其他组件
2016-11-02 10:47:50 +08:00
en-US: Other Form Controls
2016-03-31 09:40:55 +08:00
---
2016-01-22 10:25:58 +08:00
2016-07-31 09:53:51 +08:00
## zh-CN
2016-11-02 10:47:50 +08:00
以上演示没有出现的表单控件对应的校验演示。
2016-01-22 10:25:58 +08:00
2016-07-31 09:53:51 +08:00
## en-US
2016-11-02 10:47:50 +08:00
Demostration for validataion configuration for form controls which are not show in the above demos.
2016-07-31 09:53:51 +08:00
2016-01-22 10:25:58 +08:00
````jsx
import {
Form, Select, InputNumber, Switch, Radio,
Slider, Button, Upload, Icon,
} from 'antd';
2016-01-22 10:25:58 +08:00
const FormItem = Form.Item;
const Option = Select.Option;
const RadioButton = Radio.Button;
const RadioGroup = Radio.Group;
2016-01-22 10:25:58 +08:00
2016-11-02 10:47:50 +08:00
const Demo = Form.create()(React.createClass({
2016-01-22 10:25:58 +08:00
handleSubmit(e) {
e.preventDefault();
2016-11-02 10:47:50 +08:00
this.props.form.validateFields((err, values) => {
if (err) {
2016-01-22 10:25:58 +08:00
return;
}
2016-11-02 10:47:50 +08:00
console.log('Received values of form: ', values);
});
2016-01-22 10:25:58 +08:00
},
normFile(e) {
if (Array.isArray(e)) {
return e;
2016-01-22 10:25:58 +08:00
}
return e && e.fileList;
2016-01-22 10:25:58 +08:00
},
render() {
const { getFieldDecorator } = this.props.form;
2016-02-25 14:34:31 +08:00
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 },
2016-02-25 14:34:31 +08:00
};
2016-01-22 10:25:58 +08:00
return (
2016-11-02 10:47:50 +08:00
<Form horizontal onSubmit={this.handleSubmit}>
2016-01-22 10:25:58 +08:00
<FormItem
2016-02-25 14:34:31 +08:00
{...formItemLayout}
label="Select"
>
{getFieldDecorator('select', {
rules: [
{ required: true, message: 'Please select your country!' },
],
})(
<Select placeholder="Please select a country">
<Option value="china">China</Option>
<Option value="use">U.S.A</Option>
</Select>
)}
2016-01-22 10:25:58 +08:00
</FormItem>
<FormItem
2016-02-25 14:34:31 +08:00
{...formItemLayout}
label="Select[multiple]"
>
{getFieldDecorator('select-multiple', {
rules: [
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
],
})(
<Select multiple placeholder="Please select favourite colors">
<Option value="red">Red</Option>
<Option value="green">Green</Option>
<Option value="blue">Blue</Option>
</Select>
)}
2016-01-22 10:25:58 +08:00
</FormItem>
<FormItem
2016-02-25 14:34:31 +08:00
{...formItemLayout}
label="InputNumber"
>
{getFieldDecorator('input-number', { initialValue: 3 })(
<InputNumber min={1} max={10} />
)}
<span className="ant-form-text"> machines</span>
</FormItem>
<FormItem
{...formItemLayout}
label="Switch"
>
{getFieldDecorator('switch', { valuePropName: 'checked' })(
<Switch />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Slider"
>
{getFieldDecorator('slider')(
<Slider marks={{ 0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F' }} />
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Radio.Group"
>
{getFieldDecorator('radio-group')(
<RadioGroup>
<RadioButton value="a">item 1</RadioButton>
<RadioButton value="b">item 2</RadioButton>
<RadioButton value="c">item 3</RadioButton>
</RadioGroup>
)}
</FormItem>
<FormItem
{...formItemLayout}
label="Upload"
help="longgggggggggggggggggggggggggggggggggg"
>
{getFieldDecorator('upload', {
valuePropName: 'fileList',
normalize: this.normFile,
})(
<Upload name="logo" action="/upload.do" listType="picture" onChange={this.handleUpload}>
<Button type="ghost">
<Icon type="upload" /> Click to upload
</Button>
</Upload>
)}
2016-01-25 16:25:20 +08:00
</FormItem>
2016-11-02 10:47:50 +08:00
<FormItem wrapperCol={{ span: 12, offset: 7 }}>
<Button type="primary" htmlType="submit">Submit</Button>
2016-01-22 10:25:58 +08:00
</FormItem>
</Form>
);
},
2016-11-02 10:47:50 +08:00
}));
2016-01-22 10:25:58 +08:00
ReactDOM.render(<Demo />, mountNode);
````