2016-03-31 09:40:55 +08:00
|
|
|
---
|
2017-05-15 17:25:50 +08:00
|
|
|
order: 14
|
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
|
|
|
|
|
2019-01-24 10:51:47 +08:00
|
|
|
Demonstration of validation configuration for form controls which are not shown in the demos above.
|
2016-07-31 09:53:51 +08:00
|
|
|
|
2017-02-13 10:55:53 +08:00
|
|
|
````jsx
|
2016-11-02 12:13:00 +08:00
|
|
|
import {
|
|
|
|
Form, Select, InputNumber, Switch, Radio,
|
2018-12-18 13:33:57 +08:00
|
|
|
Slider, Button, Upload, Icon, Rate, Checkbox,
|
|
|
|
Row, Col,
|
2016-11-02 12:13:00 +08:00
|
|
|
} from 'antd';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
const { Option } = Select;
|
2016-01-22 10:25:58 +08:00
|
|
|
|
2017-02-20 11:50:57 +08:00
|
|
|
class Demo extends React.Component {
|
|
|
|
handleSubmit = (e) => {
|
2016-01-22 10:25:58 +08:00
|
|
|
e.preventDefault();
|
2016-11-02 10:47:50 +08:00
|
|
|
this.props.form.validateFields((err, values) => {
|
2016-11-02 18:08:48 +08:00
|
|
|
if (!err) {
|
|
|
|
console.log('Received values of form: ', values);
|
2016-01-22 10:25:58 +08:00
|
|
|
}
|
2016-11-02 10:47:50 +08:00
|
|
|
});
|
2017-02-20 11:50:57 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-02-20 11:50:57 +08:00
|
|
|
normFile = (e) => {
|
2017-03-17 11:47:05 +08:00
|
|
|
console.log('Upload event:', e);
|
2016-11-02 12:13:00 +08:00
|
|
|
if (Array.isArray(e)) {
|
|
|
|
return e;
|
2016-01-22 10:25:58 +08:00
|
|
|
}
|
2016-11-02 12:13:00 +08:00
|
|
|
return e && e.fileList;
|
2017-02-20 11:50:57 +08:00
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2016-01-22 10:25:58 +08:00
|
|
|
render() {
|
2016-09-01 11:48:38 +08:00
|
|
|
const { getFieldDecorator } = this.props.form;
|
2016-02-25 14:34:31 +08:00
|
|
|
const formItemLayout = {
|
2016-11-02 12:13:00 +08:00
|
|
|
labelCol: { span: 6 },
|
|
|
|
wrapperCol: { span: 14 },
|
2016-02-25 14:34:31 +08:00
|
|
|
};
|
2016-01-22 10:25:58 +08:00
|
|
|
return (
|
2019-02-25 19:04:09 +08:00
|
|
|
<Form {...formItemLayout} onSubmit={this.handleSubmit}>
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2017-03-20 16:08:24 +08:00
|
|
|
label="Plain Text"
|
2017-01-05 16:40:21 +08:00
|
|
|
>
|
|
|
|
<span className="ant-form-text">China</span>
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Select"
|
2017-01-01 17:39:27 +08:00
|
|
|
hasFeedback
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-09-01 11:48:38 +08:00
|
|
|
{getFieldDecorator('select', {
|
|
|
|
rules: [
|
2016-11-02 12:13:00 +08:00
|
|
|
{ required: true, message: 'Please select your country!' },
|
2016-09-01 11:48:38 +08:00
|
|
|
],
|
|
|
|
})(
|
2016-11-02 12:13:00 +08:00
|
|
|
<Select placeholder="Please select a country">
|
2016-09-01 11:48:38 +08:00
|
|
|
<Option value="china">China</Option>
|
2018-10-31 19:40:51 +08:00
|
|
|
<Option value="usa">U.S.A</Option>
|
2016-09-01 11:48:38 +08:00
|
|
|
</Select>
|
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-01-22 10:25:58 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Select[multiple]"
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-02 12:13:00 +08:00
|
|
|
{getFieldDecorator('select-multiple', {
|
2016-09-01 11:48:38 +08:00
|
|
|
rules: [
|
2016-11-02 12:13:00 +08:00
|
|
|
{ required: true, message: 'Please select your favourite colors!', type: 'array' },
|
2016-09-01 11:48:38 +08:00
|
|
|
],
|
|
|
|
})(
|
2017-03-30 16:06:03 +08:00
|
|
|
<Select mode="multiple" placeholder="Please select favourite colors">
|
2016-09-01 11:48:38 +08:00
|
|
|
<Option value="red">Red</Option>
|
|
|
|
<Option value="green">Green</Option>
|
|
|
|
<Option value="blue">Blue</Option>
|
|
|
|
</Select>
|
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-01-22 10:25:58 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="InputNumber"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('input-number', { initialValue: 3 })(
|
|
|
|
<InputNumber min={1} max={10} />
|
|
|
|
)}
|
|
|
|
<span className="ant-form-text"> machines</span>
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-11-02 12:13:00 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Switch"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('switch', { valuePropName: 'checked' })(
|
|
|
|
<Switch />
|
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-11-02 12:13:00 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Slider"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('slider')(
|
2018-11-28 15:00:03 +08:00
|
|
|
<Slider marks={{
|
|
|
|
0: 'A', 20: 'B', 40: 'C', 60: 'D', 80: 'E', 100: 'F',
|
|
|
|
}}
|
|
|
|
/>
|
2016-11-02 12:13:00 +08:00
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-11-02 12:13:00 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Radio.Group"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('radio-group')(
|
2018-12-22 16:48:30 +08:00
|
|
|
<Radio.Group>
|
2016-12-04 16:19:55 +08:00
|
|
|
<Radio value="a">item 1</Radio>
|
|
|
|
<Radio value="b">item 2</Radio>
|
|
|
|
<Radio value="c">item 3</Radio>
|
2018-12-22 16:48:30 +08:00
|
|
|
</Radio.Group>
|
2016-12-04 16:19:55 +08:00
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-12-04 16:19:55 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-12-04 16:19:55 +08:00
|
|
|
label="Radio.Button"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('radio-button')(
|
2018-12-22 16:48:30 +08:00
|
|
|
<Radio.Group>
|
|
|
|
<Radio.Button value="a">item 1</Radio.Button>
|
|
|
|
<Radio.Button value="b">item 2</Radio.Button>
|
|
|
|
<Radio.Button value="c">item 3</Radio.Button>
|
|
|
|
</Radio.Group>
|
2016-11-02 12:13:00 +08:00
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-11-02 12:13:00 +08:00
|
|
|
|
2018-12-18 13:33:57 +08:00
|
|
|
<Form.Item
|
|
|
|
label="Checkbox.Group"
|
|
|
|
>
|
|
|
|
{getFieldDecorator("checkbox-group", {
|
|
|
|
initialValue: ["A", "B"],
|
|
|
|
})(
|
|
|
|
<Checkbox.Group style={{ width: "100%" }}>
|
|
|
|
<Row>
|
|
|
|
<Col span={8}><Checkbox value="A">A</Checkbox></Col>
|
|
|
|
<Col span={8}><Checkbox disabled value="B">B</Checkbox></Col>
|
|
|
|
<Col span={8}><Checkbox value="C">C</Checkbox></Col>
|
|
|
|
<Col span={8}><Checkbox value="D">D</Checkbox></Col>
|
|
|
|
<Col span={8}><Checkbox value="E">E</Checkbox></Col>
|
|
|
|
</Row>
|
|
|
|
</Checkbox.Group>
|
|
|
|
)}
|
|
|
|
</Form.Item>
|
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2017-11-10 17:09:35 +08:00
|
|
|
label="Rate"
|
|
|
|
>
|
|
|
|
{getFieldDecorator('rate', {
|
|
|
|
initialValue: 3.5,
|
|
|
|
})(
|
|
|
|
<Rate />
|
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2017-11-10 17:09:35 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2016-11-02 12:13:00 +08:00
|
|
|
label="Upload"
|
2016-11-09 22:12:21 +08:00
|
|
|
extra="longgggggggggggggggggggggggggggggggggg"
|
2016-06-06 13:54:10 +08:00
|
|
|
>
|
2016-11-02 12:13:00 +08:00
|
|
|
{getFieldDecorator('upload', {
|
|
|
|
valuePropName: 'fileList',
|
2017-02-15 22:58:24 +08:00
|
|
|
getValueFromEvent: this.normFile,
|
2016-09-01 11:48:38 +08:00
|
|
|
})(
|
2017-03-17 11:47:05 +08:00
|
|
|
<Upload name="logo" action="/upload.do" listType="picture">
|
2017-02-04 22:35:33 +08:00
|
|
|
<Button>
|
2016-11-02 12:13:00 +08:00
|
|
|
<Icon type="upload" /> Click to upload
|
|
|
|
</Button>
|
|
|
|
</Upload>
|
2016-09-01 11:48:38 +08:00
|
|
|
)}
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-01-25 16:25:20 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2017-03-17 11:47:05 +08:00
|
|
|
label="Dragger"
|
|
|
|
>
|
|
|
|
<div className="dropbox">
|
|
|
|
{getFieldDecorator('dragger', {
|
|
|
|
valuePropName: 'fileList',
|
|
|
|
getValueFromEvent: this.normFile,
|
|
|
|
})(
|
|
|
|
<Upload.Dragger name="files" action="/upload.do">
|
|
|
|
<p className="ant-upload-drag-icon">
|
|
|
|
<Icon type="inbox" />
|
|
|
|
</p>
|
|
|
|
<p className="ant-upload-text">Click or drag file to this area to upload</p>
|
2017-09-27 22:32:49 +08:00
|
|
|
<p className="ant-upload-hint">Support for a single or bulk upload.</p>
|
2017-03-17 11:47:05 +08:00
|
|
|
</Upload.Dragger>
|
|
|
|
)}
|
|
|
|
</div>
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2017-03-17 11:47:05 +08:00
|
|
|
|
2018-12-22 16:48:30 +08:00
|
|
|
<Form.Item
|
2017-03-10 19:19:36 +08:00
|
|
|
wrapperCol={{ span: 12, offset: 6 }}
|
2017-03-02 10:49:06 +08:00
|
|
|
>
|
2016-11-02 10:47:50 +08:00
|
|
|
<Button type="primary" htmlType="submit">Submit</Button>
|
2018-12-22 16:48:30 +08:00
|
|
|
</Form.Item>
|
2016-01-22 10:25:58 +08:00
|
|
|
</Form>
|
|
|
|
);
|
2017-02-20 11:50:57 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2018-12-17 10:02:08 +08:00
|
|
|
const WrappedDemo = Form.create({ name: 'validate_other' })(Demo);
|
2016-01-22 10:25:58 +08:00
|
|
|
|
2017-02-20 11:50:57 +08:00
|
|
|
ReactDOM.render(<WrappedDemo />, mountNode);
|
2016-01-22 10:25:58 +08:00
|
|
|
````
|
2017-03-17 11:47:05 +08:00
|
|
|
|
|
|
|
````css
|
|
|
|
#components-form-demo-validate-other .dropbox {
|
|
|
|
height: 180px;
|
|
|
|
line-height: 1.5;
|
|
|
|
}
|
|
|
|
````
|