ant-design/components/form/demo/dynamic-rule.md
Federico Marcos ab92c934d5 fix incorrect prop passed to checkbox in docs examples (#12448)
prop should be `checked` instead of `value`
2018-09-29 18:09:03 +08:00

98 lines
2.1 KiB
Markdown

---
order: 13
title:
zh-CN: 动态校验规则
en-US: Dynamic Rules
---
## zh-CN
根据不同情况执行不同的校验规则。
## en-US
Perform different check rules according to different situations.
````jsx
import { Form, Input, Button, Checkbox } from 'antd';
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,
};
check = () => {
this.props.form.validateFields(
(err) => {
if (!err) {
console.info('success');
}
},
);
}
handleChange = (e) => {
this.setState({
checkNick: e.target.checked,
}, () => {
this.props.form.validateFields(['nickname'], { force: true });
});
}
render() {
const { getFieldDecorator } = this.props.form;
return (
<div>
<FormItem {...formItemLayout} label="Name">
{getFieldDecorator('username', {
rules: [{
required: true,
message: 'Please input your name',
}],
})(
<Input placeholder="Please input your name" />
)}
</FormItem>
<FormItem {...formItemLayout} label="Nickname">
{getFieldDecorator('nickname', {
rules: [{
required: this.state.checkNick,
message: 'Please input your nickname',
}],
})(
<Input placeholder="Please input your nickname" />
)}
</FormItem>
<FormItem {...formTailLayout}>
<Checkbox
checked={this.state.checkNick}
onChange={this.handleChange}
>
Nickname is required
</Checkbox>
</FormItem>
<FormItem {...formTailLayout}>
<Button type="primary" onClick={this.check}>
Check
</Button>
</FormItem>
</div>
);
}
}
const WrappedDynamicRule = Form.create()(DynamicRule);
ReactDOM.render(<WrappedDynamicRule />, mountNode);
````