docs: add dynamic-rule form demo (#6035)

components/form/__tests__/__snapshots__/demo.test.js.snap

@@ -523,6 +523,123 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
 </form>
 `;
 
+exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
+<div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col-4 ant-form-item-label"
+    >
+      <label
+        class="ant-form-item-required"
+        for="username"
+        title="姓名"
+      >
+        姓名
+      </label>
+    </div>
+    <div
+      class="ant-col-8 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control "
+      >
+        <input
+          class="ant-input ant-input-lg"
+          data-__meta="[object Object]"
+          id="username"
+          placeholder="请输入姓名"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col-4 ant-form-item-label"
+    >
+      <label
+        class=""
+        for="nickname"
+        title="昵称"
+      >
+        昵称
+      </label>
+    </div>
+    <div
+      class="ant-col-8 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control "
+      >
+        <input
+          class="ant-input ant-input-lg"
+          data-__meta="[object Object]"
+          id="nickname"
+          placeholder="请输入昵称"
+          type="text"
+          value=""
+        />
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control "
+      >
+        <label
+          class="ant-checkbox-wrapper"
+        >
+          <span
+            class="ant-checkbox"
+          >
+            <input
+              class="ant-checkbox-input"
+              type="checkbox"
+            />
+            <span
+              class="ant-checkbox-inner"
+            />
+          </span>
+          <span>
+            昵称必填
+          </span>
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-row ant-form-item"
+  >
+    <div
+      class="ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper"
+    >
+      <div
+        class="ant-form-item-control "
+      >
+        <button
+          class="ant-btn ant-btn-primary ant-btn-lg"
+          type="button"
+        >
+          <span>
+            Check
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/form/demo/form-in-modal.md correctly 1`] = `
 <div>
   <button

components/form/demo/dynamic-rule.md

@@ -0,0 +1,93 @@
+---
+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="姓名">
+          {getFieldDecorator('username', {
+            rules: [{
+              required: true,
+              message: '请输入姓名',
+            }],
+          })(
+            <Input placeholder="请输入姓名" />
+          )}
+        </FormItem>
+        <FormItem {...formItemLayout} label="昵称">
+          {getFieldDecorator('nickname', {
+            rules: [{
+              required: this.state.checkNick,
+              message: '请输入昵称',
+            }],
+          })(
+            <Input placeholder="请输入昵称" />
+          )}
+        </FormItem>
+        <FormItem {...formTailLayout}>
+          <Checkbox
+            value={this.state.checkNick}
+            onChange={this.handleChange}
+          >
+            昵称必填
+          </Checkbox>
+        </FormItem>
+        <FormItem {...formTailLayout}>
+          <Button type="primary" onClick={this.check}>
+            Check
+          </Button>
+        </FormItem>
+      </div>
+    );
+  }
+}
+
+const WrappedDynamicRule = Form.create()(DynamicRule);
+ReactDOM.render(<WrappedDynamicRule />, mountNode);
+
+````

components/form/demo/validate-other.md

@@ -1,5 +1,5 @@
 ---
-order: 13
+order: 14
 title:
   zh-CN: 校验其他组件
   en-US: Other Form Controls