2017-05-15 17:25:50 +08:00
|
|
|
---
|
|
|
|
order: 13
|
|
|
|
title:
|
|
|
|
zh-CN: 动态校验规则
|
|
|
|
en-US: Dynamic Rules
|
|
|
|
---
|
|
|
|
|
|
|
|
## zh-CN
|
|
|
|
|
|
|
|
根据不同情况执行不同的校验规则。
|
|
|
|
|
|
|
|
## en-US
|
|
|
|
|
|
|
|
Perform different check rules according to different situations.
|
|
|
|
|
|
|
|
````jsx
|
2018-11-28 15:00:03 +08:00
|
|
|
import {
|
|
|
|
Form, Input, Button, Checkbox,
|
|
|
|
} from 'antd';
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-05-15 17:25:50 +08:00
|
|
|
const FormItem = Form.Item;
|
|
|
|
|
|
|
|
const formItemLayout = {
|
|
|
|
labelCol: { span: 4 },
|
|
|
|
wrapperCol: { span: 8 },
|
|
|
|
};
|
|
|
|
const formTailLayout = {
|
|
|
|
labelCol: { span: 4 },
|
|
|
|
wrapperCol: { span: 8, offset: 4 },
|
|
|
|
};
|
|
|
|
class DynamicRule extends React.Component {
|
|
|
|
state = {
|
|
|
|
checkNick: false,
|
|
|
|
};
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-05-15 17:25:50 +08:00
|
|
|
check = () => {
|
|
|
|
this.props.form.validateFields(
|
|
|
|
(err) => {
|
|
|
|
if (!err) {
|
|
|
|
console.info('success');
|
|
|
|
}
|
|
|
|
},
|
|
|
|
);
|
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-05-15 17:25:50 +08:00
|
|
|
handleChange = (e) => {
|
|
|
|
this.setState({
|
|
|
|
checkNick: e.target.checked,
|
|
|
|
}, () => {
|
|
|
|
this.props.form.validateFields(['nickname'], { force: true });
|
|
|
|
});
|
|
|
|
}
|
2018-06-27 15:55:04 +08:00
|
|
|
|
2017-05-15 17:25:50 +08:00
|
|
|
render() {
|
|
|
|
const { getFieldDecorator } = this.props.form;
|
|
|
|
return (
|
|
|
|
<div>
|
2017-05-15 17:33:47 +08:00
|
|
|
<FormItem {...formItemLayout} label="Name">
|
2017-05-15 17:25:50 +08:00
|
|
|
{getFieldDecorator('username', {
|
|
|
|
rules: [{
|
|
|
|
required: true,
|
2017-05-15 17:33:47 +08:00
|
|
|
message: 'Please input your name',
|
2017-05-15 17:25:50 +08:00
|
|
|
}],
|
|
|
|
})(
|
2017-05-15 17:33:47 +08:00
|
|
|
<Input placeholder="Please input your name" />
|
2017-05-15 17:25:50 +08:00
|
|
|
)}
|
|
|
|
</FormItem>
|
2017-05-15 17:33:47 +08:00
|
|
|
<FormItem {...formItemLayout} label="Nickname">
|
2017-05-15 17:25:50 +08:00
|
|
|
{getFieldDecorator('nickname', {
|
|
|
|
rules: [{
|
|
|
|
required: this.state.checkNick,
|
2017-05-15 17:33:47 +08:00
|
|
|
message: 'Please input your nickname',
|
2017-05-15 17:25:50 +08:00
|
|
|
}],
|
|
|
|
})(
|
2017-05-15 17:33:47 +08:00
|
|
|
<Input placeholder="Please input your nickname" />
|
2017-05-15 17:25:50 +08:00
|
|
|
)}
|
|
|
|
</FormItem>
|
|
|
|
<FormItem {...formTailLayout}>
|
|
|
|
<Checkbox
|
2018-09-29 18:09:03 +08:00
|
|
|
checked={this.state.checkNick}
|
2017-05-15 17:25:50 +08:00
|
|
|
onChange={this.handleChange}
|
|
|
|
>
|
2017-05-15 17:33:47 +08:00
|
|
|
Nickname is required
|
2017-05-15 17:25:50 +08:00
|
|
|
</Checkbox>
|
|
|
|
</FormItem>
|
|
|
|
<FormItem {...formTailLayout}>
|
|
|
|
<Button type="primary" onClick={this.check}>
|
|
|
|
Check
|
|
|
|
</Button>
|
|
|
|
</FormItem>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
const WrappedDynamicRule = Form.create()(DynamicRule);
|
|
|
|
ReactDOM.render(<WrappedDynamicRule />, mountNode);
|
|
|
|
|
|
|
|
````
|