refine validation demo.

components/validation/demo/basic.md

@@ -1,21 +1,18 @@
-# 基本
+# Input 表单域
 
 - order: 0
 
 基本的表单校验例子。
 
-每个表单域要声明 `name` 属性作为校验的标识，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。
+**每个表单域要声明 `name` 属性作为校验的标识**，可通过其 `isValidating`、`errors` 属性判断是否处于校验中、是否校验不通过状态，具体可参见 **用户名** 校验。
 
 表单提交的时候，通过 Validation 的 validate 方法判断是否所有表单域校验通过（isValid 会作为回调函数的参数传入）。
 
 ---
 
 ````jsx
-
+import {Validation, Button, Form, Input} from 'antd';
-import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form, Input} from 'antd';
 const Validator = Validation.Validator;
-const Option = Select.Option;
-const RadioGroup = Radio.Group;
 const FormItem = Form.Item;
 
 function cx(classNames) {
@@ -40,24 +37,16 @@ const Demo = React.createClass({
       status: {
         email: {},
         name: {},
-        select: {},
-        radio: {},
         passwd: {},
         rePasswd: {},
-        textarea: {},
+        textarea: {}
-        birthday: {},
-        primeNumber: {}
       },
       formData: {
         email: undefined,
         name: undefined,
-        select: undefined,
-        radio: undefined,
         passwd: undefined,
         rePasswd: undefined,
-        textarea: undefined,
+        textarea: undefined
-        birthday: undefined,
-        primeNumber: 9
       },
       isEmailOver: false, // email 是否输入完毕
       emailValidateMethod: 'onBlur' // 用于改变 email 的验证方法
@@ -144,22 +133,6 @@ const Demo = React.createClass({
     }
   },
 
-  checkBirthday(rule, value, callback) {
-    if (value && value.getTime() >= Date.now()){
-      callback(new Error('你不可能在未来出生吧!'));
-    } else {
-      callback();
-    }
-  },
-
-  checkPrime(rule, value, callback) {
-    if (value !== 11) {
-      callback(new Error('8~12之间的质数明明是11啊!'));
-    } else {
-      callback();
-    }
-  },
-
   render() {
     const formData = this.state.formData;
     const status = this.state.status;
@@ -195,41 +168,6 @@ const Demo = React.createClass({
               </Validator>
           </FormItem>
 
-          <FormItem
-            label="国籍："
-            id="select"
-            labelCol={{span: 7}}
-            wrapperCol={{span: 12}}
-            validateStatus={this.renderValidateStyle('select')}
-            help={status.select.errors ? status.select.errors.join(',') : null}
-            required>
-              <Validator rules={[{required: true, message: '请选择您的国籍'}]}>
-                <Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
-                  <Option value="china">中国</Option>
-                  <Option value="use">美国</Option>
-                  <Option value="japan">日本</Option>
-                  <Option value="korean">韩国</Option>
-                  <Option value="Thailand">泰国</Option>
-                </Select>
-              </Validator>
-          </FormItem>
-
-          <FormItem
-            label="性别："
-            id="radio"
-            labelCol={{span: 7}}
-            wrapperCol={{span: 12}}
-            validateStatus={this.renderValidateStyle('radio')}
-            help={status.radio.errors ? status.radio.errors.join(',') : null}
-            required>
-              <Validator rules={[{required: true, message: '请选择您的性别'}]}>
-                <RadioGroup name="radio" value={formData.radio}>
-                  <Radio value="male">男</Radio>
-                  <Radio value="female">女</Radio>
-                </RadioGroup>
-              </Validator>
-          </FormItem>
-
           <FormItem
             label="密码："
             id="password"
@@ -262,36 +200,6 @@ const Demo = React.createClass({
               </Validator>
           </FormItem>
 
-          <FormItem
-            label="生日："
-            id="birthday"
-            labelCol={{span: 7}}
-            wrapperCol={{span: 12}}
-            validateStatus={this.renderValidateStyle('birthday')}
-            help={status.birthday.errors ? status.birthday.errors.join(',') : null}
-            required>
-              <Validator rules={[{
-                required: true,
-                type: 'date',
-                message: '你的生日是什么呢?'
-              }, {validator: this.checkBirthday}]}>
-                <Datepicker name="birthday" value={formData.birthday}></Datepicker>
-              </Validator>
-          </FormItem>
-
-          <FormItem
-            label="8~12间的质数："
-            id="primeNumber"
-            labelCol={{span: 7}}
-            wrapperCol={{span: 12}}
-            validateStatus={this.renderValidateStyle('primeNumber')}
-            help={status.primeNumber.errors ? status.primeNumber.errors.join(',') : null}
-            required>
-              <Validator rules={[{validator: this.checkPrime}]}>
-                <InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
-              </Validator>
-          </FormItem>
-
           <FormItem
             label="备注："
             id="textarea"

components/validation/demo/customize.md

@@ -1,6 +1,6 @@
 # 自定义校验规则
 
-- order: 1
+- order: 2
 
 密码校验实例。
 

components/validation/demo/multiple-select.md

@@ -1,113 +0,0 @@
-# 多选 Select
-
-- order: 2
-
-多选 Select 的校验例子。
-
----
-
-````jsx
-var Validation = antd.Validation;
-var Validator = Validation.Validator;
-var Select = antd.Select;
-var Option = Select.Option;
-var Button = antd.Button;
-
-function cx(classNames) {
-  if (typeof classNames === 'object') {
-    return Object.keys(classNames).filter(function(className) {
-      return classNames[className];
-    }).join(' ');
-  } else {
-    return Array.prototype.join.call(arguments, ' ');
-  }
-}
-
-var Form = React.createClass({
-  mixins: [Validation.FieldMixin],
-
-  getInitialState() {
-    return {
-      status: {
-        select: {}
-      },
-      formData: {
-        select: undefined
-      }
-    };
-  },
-
-  handleSubmit(e) {
-    e.preventDefault();
-    var validation = this.refs.validation;
-    validation.validate((valid) => {
-      if (!valid) {
-        console.log('error in form');
-        return;
-      } else {
-        console.log('submit');
-      }
-      console.log(this.state.formData);
-    });
-  },
-
-  handleReset(e) {
-    this.refs.validation.reset();
-    this.setState(this.getInitialState());
-    e.preventDefault();
-  },
-
-  renderValidateStyle(item, hasFeedback=true) {
-    var formData = this.state.formData;
-    var status = this.state.status;
-
-    var classes = cx({
-      'has-feedback': hasFeedback,
-      'has-error': status[item].errors,
-      'is-validating': status[item].isValidating,
-      'has-success': formData[item] && !status[item].errors && !status[item].isValidating
-    });
-
-    return classes;
-  },
-
-  render() {
-    var formData = this.state.formData;
-    var status = this.state.status;
-
-    return (
-      <form className="ant-form-horizontal">
-        <Validation ref="validation" onValidate={this.handleValidate}>
-          <div className="ant-form-item">
-            <label className="col-7" required>喜欢的颜色：</label>
-            <div className="col-12">
-              <div className={this.renderValidateStyle('select', false)}>
-                <Validator rules={[{required: true, message: '请选择您喜欢的颜色', type: 'array'}]}>
-                  <Select multiple size="large" placeholder="请选择颜色" style={{width:"100%"}} name="select" value={formData.select}>
-                    <Option value="red">红色</Option>
-                    <Option value="orange">橙色</Option>
-                    <Option value="yellow">黄色</Option>
-                    <Option value="green">绿色</Option>
-                    <Option value="blue">蓝色</Option>
-                  </Select>
-                </Validator>
-                {status.select.errors ? <div className="ant-form-explain">{status.select.errors.join(',')}</div> : null}
-              </div>
-            </div>
-          </div>
-          
-          <div className="ant-form-item">
-            <div className="col-offset-6 col-12">
-              <Button type="primary" onClick={this.handleSubmit}>确 定</Button>
-              &nbsp;&nbsp;&nbsp;
-              <Button type="ghost" onClick={this.handleReset}>重 置</Button>
-            </div>
-          </div>
-        </Validation>
-      </form>
-    );
-  }
-});
-
-ReactDOM.render(<Form />, document.getElementById('components-validation-demo-multiple-select'));
-````

components/validation/demo/other-items.md

@@ -0,0 +1,209 @@
+# 其他表单域校验
+
+- order: 1
+
+提供以下组件表单域的校验。
+
+`Select` `Radio` `Datepicker` `InputNumber`。
+
+---
+
+````jsx
+import {Validation, Select, Radio, Button, Datepicker, InputNumber, Form} from 'antd';
+const Validator = Validation.Validator;
+const Option = Select.Option;
+const RadioGroup = Radio.Group;
+const FormItem = Form.Item;
+
+function cx(classNames) {
+  if (typeof classNames === 'object') {
+    return Object.keys(classNames).filter(function(className) {
+      return classNames[className];
+    }).join(' ');
+  } else {
+    return Array.prototype.join.call(arguments, ' ');
+  }
+}
+
+function noop() {
+  return false;
+}
+
+const Demo = React.createClass({
+  mixins: [Validation.FieldMixin],
+
+  getInitialState() {
+    return {
+      status: {
+        select: {},
+        multiSelect: {},
+        radio: {},
+        birthday: {},
+        primeNumber: {}
+      },
+      formData: {
+        select: undefined,
+        multiSelect: undefined,
+        radio: undefined,
+        birthday: undefined,
+        primeNumber: 9
+      }
+    };
+  },
+
+  renderValidateStyle(item) {
+    const formData = this.state.formData;
+    const status = this.state.status;
+
+    const classes = cx({
+      'error': status[item].errors,
+      'validating': status[item].isValidating,
+      'success': formData[item] && !status[item].errors && !status[item].isValidating
+    });
+
+    return classes;
+  },
+
+  handleReset(e) {
+    this.refs.validation.reset();
+    this.setState(this.getInitialState());
+    e.preventDefault();
+  },
+
+  handleSubmit(e) {
+    e.preventDefault();
+    this.setState({
+      isEmailOver: true
+    });
+    const validation = this.refs.validation;
+    validation.validate((valid) => {
+      if (!valid) {
+        console.log('error in form');
+        return;
+      } else {
+        console.log('submit');
+      }
+      console.log(this.state.formData);
+    });
+  },
+
+  checkBirthday(rule, value, callback) {
+    if (value && value.getTime() >= Date.now()){
+      callback(new Error('你不可能在未来出生吧!'));
+    } else {
+      callback();
+    }
+  },
+
+  checkPrime(rule, value, callback) {
+    if (value !== 11) {
+      callback(new Error('8~12之间的质数明明是11啊!'));
+    } else {
+      callback();
+    }
+  },
+
+  render() {
+    const formData = this.state.formData;
+    const status = this.state.status;
+
+    return (
+      <Form horizontal>
+        <Validation ref="validation" onValidate={this.handleValidate}>
+          <FormItem
+            label="国籍："
+            id="select"
+            labelCol={{span: 7}}
+            wrapperCol={{span: 12}}
+            validateStatus={this.renderValidateStyle('select')}
+            help={status.select.errors ? status.select.errors.join(',') : null}
+            required>
+              <Validator rules={[{required: true, message: '请选择您的国籍'}]}>
+                <Select size="large" placeholder="请选择国家" style={{width:"100%"}} name="select" value={formData.select}>
+                  <Option value="china">中国</Option>
+                  <Option value="use">美国</Option>
+                  <Option value="japan">日本</Option>
+                  <Option value="korean">韩国</Option>
+                  <Option value="Thailand">泰国</Option>
+                </Select>
+              </Validator>
+          </FormItem>
+
+          <FormItem
+            label="喜欢的颜色："
+            labelCol={{span: 7}}
+            wrapperCol={{span: 12}}
+            validateStatus={this.renderValidateStyle('multiSelect')}
+            help={status.multiSelect.errors ? status.multiSelect.errors.join(',') : null}
+            required>
+            <Validator rules={[{required: true, message: '请选择您喜欢的颜色', type: 'array'}]}>
+              <Select multiple size="large" placeholder="请选择颜色" style={{width:"100%"}} name="multiSelect" value={formData.multiSelect}>
+                <Option value="red">红色</Option>
+                <Option value="orange">橙色</Option>
+                <Option value="yellow">黄色</Option>
+                <Option value="green">绿色</Option>
+                <Option value="blue">蓝色</Option>
+              </Select>
+            </Validator>
+          </FormItem>
+
+          <FormItem
+            label="性别："
+            id="radio"
+            labelCol={{span: 7}}
+            wrapperCol={{span: 12}}
+            validateStatus={this.renderValidateStyle('radio')}
+            help={status.radio.errors ? status.radio.errors.join(',') : null}
+            required>
+              <Validator rules={[{required: true, message: '请选择您的性别'}]}>
+                <RadioGroup name="radio" value={formData.radio}>
+                  <Radio value="male">男</Radio>
+                  <Radio value="female">女</Radio>
+                </RadioGroup>
+              </Validator>
+          </FormItem>
+
+          <FormItem
+            label="生日："
+            id="birthday"
+            labelCol={{span: 7}}
+            wrapperCol={{span: 12}}
+            validateStatus={this.renderValidateStyle('birthday')}
+            help={status.birthday.errors ? status.birthday.errors.join(',') : null}
+            required>
+              <Validator rules={[{
+                required: true,
+                type: 'date',
+                message: '你的生日是什么呢?'
+              }, {validator: this.checkBirthday}]}>
+                <Datepicker name="birthday" value={formData.birthday}></Datepicker>
+              </Validator>
+          </FormItem>
+
+          <FormItem
+            label="8~12间的质数："
+            id="primeNumber"
+            labelCol={{span: 7}}
+            wrapperCol={{span: 12}}
+            validateStatus={this.renderValidateStyle('primeNumber')}
+            help={status.primeNumber.errors ? status.primeNumber.errors.join(',') : null}
+            required>
+              <Validator rules={[{validator: this.checkPrime}]}>
+                <InputNumber name="primeNumber" min={8} max={12} value={formData.primeNumber}/>
+              </Validator>
+          </FormItem>
+
+          <FormItem
+            wrapperCol={{span: 12, offset: 7}} >
+            <Button type="primary" onClick={this.handleSubmit}>确定</Button>
+            &nbsp;&nbsp;&nbsp;
+            <Button type="ghost" onClick={this.handleReset}>重置</Button>
+          </FormItem>
+        </Validation>
+      </Form>
+    );
+  }
+});
+
+ReactDOM.render(<Demo />, document.getElementById('components-validation-demo-other-items'));
+````