From 0aaf2836031316ec24792a2c1fc4810abc93954c Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Fri, 28 Jul 2017 23:52:01 +0800
Subject: [PATCH 1/7] =?UTF-8?q?check=E6=94=AF=E6=8C=81rules,input=20rules?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/components/form/KLCheck/index.html | 11 +++++-
 src/js/components/form/KLCheck/index.js   | 17 +++++++-
 src/js/components/form/KLCheck/index.mcss |  3 +-
 src/js/components/form/KLInput/index.js   | 41 ++++---------------
 src/js/ui-base/_.js                       |  2 +-
 src/js/ui-base/component.js               | 48 ++++++++++++++++++++++-
 6 files changed, 81 insertions(+), 41 deletions(-)

diff --git a/src/js/components/form/KLCheck/index.html b/src/js/components/form/KLCheck/index.html
index 9fac07af..ccaa6837 100644
--- a/src/js/components/form/KLCheck/index.html
+++ b/src/js/components/form/KLCheck/index.html
@@ -1,3 +1,10 @@
-<label class="u-check {class}" z-chk={checked} z-dis={disabled}
+<div class="f-ib f-vat">
+    <div class="u-check {class}" z-chk={checked} z-dis={disabled}
        r-class={ {'z-part': checked === null, 'u-check-block': block} } r-hide={!visible} title={name} on-click={this.check()}>
-<div class="check_box"><i class="u-icon u-icon-ok"></i></div>{name}</label>
\ No newline at end of file
+        <span class="check_box check_box_{state}">
+            <i class="u-icon u-icon-ok"></i>
+        </span>
+    {name}
+    </div>
+    {#if tip && !hideTip}<span class="u-tip u-tip-{state} animated" r-animation="on:enter;class:fadeInY;on:leave;class:fadeOutY;"><i class="u-icon u-icon-{state}"></i><span class="tip">{tip}</span></span>{/if}
+</div>
\ No newline at end of file
diff --git a/src/js/components/form/KLCheck/index.js b/src/js/components/form/KLCheck/index.js
index 21162d56..0dc213a3 100644
--- a/src/js/components/form/KLCheck/index.js
+++ b/src/js/components/form/KLCheck/index.js
@@ -8,6 +8,8 @@
 const Component = require('../../../ui-base/component');
 const template = require('./index.html');
 const _ = require('../../../ui-base/_');
+const Validation = require('../../../util/validation');
+const validationMixin = require('../../../util/validationMixin');
 
 /**
  * @class KLCheck
@@ -17,6 +19,7 @@ const _ = require('../../../ui-base/_');
  * @param {boolean}     [options.data.checked=false]    <=> 多选按钮的选择状态。`false`表示未选，`true`表示已选，`null`表示半选。
  * @param {boolean}     [options.data.block=false]      => 是否以block方式显示
  * @param {boolean}     [options.data.readonly=false]   => 是否只读
+ * @param {boolean}     [options.data.hideTip=false]    => 是否显示校验错误信息
  * @param {boolean}     [options.data.disabled=false]   => 是否禁用
  * @param {boolean}     [options.data.visible=true]     => 是否显示
  * @param {string}      [options.data.class]            => 补充class
@@ -30,11 +33,16 @@ const KLCheck = Component.extend({
   config() {
     _.extend(this.data, {
       name: '',
+      defaultRules: [],
+      rules: [],
+      tip: false,
+      hideTip: false,
+      state: '',
       checked: false,
       block: false,
     });
     this.supr();
-
+    this.initValidation();
     this.$watch('checked', function (newValue, oldValue) {
       if (oldValue === undefined) return;
 
@@ -49,6 +57,10 @@ const KLCheck = Component.extend({
       });
     });
   },
+  validate(on = '') {
+    const value = this.data.checked;
+    return this._validate(on, value, Validation);
+  },
   /**
      * @method check(checked) 改变选中状态
      * @public
@@ -56,6 +68,8 @@ const KLCheck = Component.extend({
      * @return {void}
      */
   check(_checked) {
+    this.data.state = '';
+    this.data.tip = '';
     if (this.data.readonly || this.data.disabled) return;
 
     let checked = _checked;
@@ -73,5 +87,6 @@ const KLCheck = Component.extend({
     });
   },
 });
+KLCheck.use(validationMixin);
 
 module.exports = KLCheck;
diff --git a/src/js/components/form/KLCheck/index.mcss b/src/js/components/form/KLCheck/index.mcss
index 837126e6..51141e37 100644
--- a/src/js/components/form/KLCheck/index.mcss
+++ b/src/js/components/form/KLCheck/index.mcss
@@ -9,15 +9,14 @@
 $u-check_box_size = 13px;
 
 .u-check {
-    display:inline-block;
     cursor: pointer;
     $user-select: none;
     white-space:nowrap;
     font-size: 12px;
     line-height: 32px;
     .check_box {
-        display: inline-block;
         position: relative;
+        display: inline-block;
         overflow: hidden;
         text-align: center;
         margin-right: 8px;
diff --git a/src/js/components/form/KLInput/index.js b/src/js/components/form/KLInput/index.js
index 8b545021..8a62c569 100644
--- a/src/js/components/form/KLInput/index.js
+++ b/src/js/components/form/KLInput/index.js
@@ -55,6 +55,7 @@ const KLInput = Component.extend({
       state: '',
       maxlength: undefined,
       unit: '',
+      defaultRules: [],
       rules: [],
       autofocus: false,
       _eltIE9: bowser.msie && bowser.version <= 9,
@@ -78,7 +79,7 @@ const KLInput = Component.extend({
       if (value) {
         this.addRule('required');
       } else {
-        this.data.rules = this.data.rules.filter(
+        this.data.defaultRules = this.data.defaultRules.filter(
           rule => rule.type !== 'isRequired',
         );
       }
@@ -105,7 +106,7 @@ const KLInput = Component.extend({
      * @protected
      */
   addRule(name) {
-    const { min, max, message: _message, rules } = this.data;
+    const { min, max, message: _message, defaultRules } = this.data;
 
     let message = _message;
     if (name === 'required') {
@@ -117,11 +118,11 @@ const KLInput = Component.extend({
     }
     const rule = inputRules[name];
     if (typeof rule === 'function') {
-      rules.push(rule(min, max, message));
+      defaultRules.push(rule(min, max, message));
     } else {
       const ruleCopy = _.extend({}, rule);
       message && (ruleCopy.message = message);
-      rules.push(ruleCopy);
+      defaultRules.push(ruleCopy);
     }
   },
   /**
@@ -132,41 +133,13 @@ const KLInput = Component.extend({
   validate(on = '') {
     const value =
       this.data.value || this.data.value === 0 ? `${this.data.value}` : '';
-    let rules = this.data.rules;
-
-    rules = rules.filter(rule => (rule.on || '').indexOf(on) >= 0);
-
-    const result = Validation.validate(value, rules);
-    if (
-      result.firstRule &&
-      !(
-        result.firstRule.silentOn === true ||
-        (typeof result.firstRule.silentOn === 'string' &&
-          result.firstRule.silentOn.indexOf(on) >= 0)
-      )
-    ) {
-      this.data.tip = result.firstRule.message;
-    } else this.data.tip = '';
-
-    // @TODO
-    if (!result.success) this.data.state = 'error';
-    else {
-      this.data.state = '';
-    }
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+    return this._validate(on, value, Validation);
   },
 
   /**
      * 1. type=char时,去除前后的空格;
      * 2. type=int/float时, 只能输入对应类型的数字;
-     **/
+     * */
   __valueFilter(_value) {
     const type = this.data.type;
 
diff --git a/src/js/ui-base/_.js b/src/js/ui-base/_.js
index b453b972..0e416bb9 100644
--- a/src/js/ui-base/_.js
+++ b/src/js/ui-base/_.js
@@ -33,7 +33,7 @@ const _ = {
   },
   clone(obj) {
     return JSON.parse(JSON.stringify(obj));
-  },
+  }
 };
 
 _.throttle = function (fn, delay) {
diff --git a/src/js/ui-base/component.js b/src/js/ui-base/component.js
index 3cc3ca8b..fd61cf1a 100644
--- a/src/js/ui-base/component.js
+++ b/src/js/ui-base/component.js
@@ -41,12 +41,59 @@ const Component = Regular.extend({
   defaults(data) {
     this.data = Object.assign(data, this.data);
   },
+  init() {
+    this.supr();
+  },
   /**
      * @protected
      */
   rules(attris) {
     this.data = Object.assign(attris, this.data);
   },
+  _validate(on, value, Validation) {
+    const data = this.data;
+    let rules = [];
+    if (Array.isArray(data.rules)) {
+      rules = [].concat.call(data.defaultRules || [], data.rules);
+    } else if (typeof data.rules === 'function') {
+      const _rule = [{
+        type: 'method',
+        method: data.rules,
+      }];
+      rules = [].concat.call(data.defaultRules || [], _rule);
+    } else if (typeof data.rules === 'object') {
+      rules = [].concat.call(data.defaultRules || [], [data.rules]);
+    } else {
+      rules = [].concat.call(data.defaultRules || []);
+    }
+    rules = rules.filter(rule => (rule.on || '').indexOf(on) >= 0);
+    const result = Validation.validate(value, rules);
+    data.tip = this.showTip(on, result) ? result.firstRule.message : '';
+
+    // @TODO
+    data.state = result.success ? '' : 'error';
+
+    this.$emit('validate', {
+      sender: this,
+      on,
+      result,
+    });
+
+    return result;
+  },
+  showTip(on, result) {
+    if (
+      result.firstRule &&
+      !(
+        result.firstRule.silentOn === true ||
+        (typeof result.firstRule.silentOn === 'string' &&
+          result.firstRule.silentOn.indexOf(on) >= 0)
+      )
+    ) {
+      return true;
+    }
+    return false;
+  },
   /**
      * @protected
      */
@@ -60,7 +107,6 @@ const Component = Regular.extend({
 })
   .filter(filter)
   .directive(directive);
-
 animation.install(Regular);
 
 module.exports = Component;

From 73e06b480076c6f77474d7cef28d2c60dcf3a51b Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Wed, 2 Aug 2017 23:01:18 +0800
Subject: [PATCH 2/7] =?UTF-8?q?check=E5=92=8Ccheckgroup=20rule=E5=B1=9E?=
 =?UTF-8?q?=E6=80=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/js/components/form/KLCheck/index.js      | 13 ++++-
 src/js/components/form/KLCheckGroup/index.js | 57 +++++++++++---------
 src/js/ui-base/_.js                          |  7 +++
 src/js/util/commonRule.js                    | 20 +++++++
 src/js/util/validation.js                    |  4 +-
 5 files changed, 73 insertions(+), 28 deletions(-)
 create mode 100644 src/js/util/commonRule.js

diff --git a/src/js/components/form/KLCheck/index.js b/src/js/components/form/KLCheck/index.js
index 0dc213a3..fa35cb4d 100644
--- a/src/js/components/form/KLCheck/index.js
+++ b/src/js/components/form/KLCheck/index.js
@@ -10,6 +10,7 @@ const template = require('./index.html');
 const _ = require('../../../ui-base/_');
 const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLCheck
@@ -33,13 +34,14 @@ const KLCheck = Component.extend({
   config() {
     _.extend(this.data, {
       name: '',
-      defaultRules: [],
       rules: [],
       tip: false,
       hideTip: false,
       state: '',
       checked: false,
       block: false,
+      required: false,
+      defaultRules: [],
     });
     this.supr();
     this.initValidation();
@@ -56,6 +58,15 @@ const KLCheck = Component.extend({
         checked: newValue,
       });
     });
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.checkRequired);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'check-required',
+        );
+      }
+    });
   },
   validate(on = '') {
     const value = this.data.checked;
diff --git a/src/js/components/form/KLCheckGroup/index.js b/src/js/components/form/KLCheckGroup/index.js
index 3aff4ce7..12bf012e 100644
--- a/src/js/components/form/KLCheckGroup/index.js
+++ b/src/js/components/form/KLCheckGroup/index.js
@@ -5,9 +5,12 @@
  * ------------------------------------------------------------
  */
 
+const _ = require('../../../ui-base/_');
 const SourceComponent = require('../../../ui-base/sourceComponent');
 const template = require('./index.html');
+const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLCheckGroup
@@ -49,10 +52,35 @@ const KLCheckGroup = SourceComponent.extend({
       key: 'id',
       value: '',
       separator: ',',
+      required: false,
+      defaultRules: [],
     });
     this.supr();
 
     this.initValidation();
+    this.data.defaultRules.push({
+      type: 'method',
+      method(value, rule) {
+        const min = rule.data.min;
+        const max = rule.data.max;
+        const valueArr = ''.split.call(value || '', ',');
+        const len = _.isEmpty(value) ? 0 : valueArr.length;
+        if (len < min || len > max) {
+          return `请选择[${min},${max}]个选项`;
+        }
+        return true;
+      },
+      data: this.data,
+    });
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.noEmpty);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'no-empty',
+        );
+      }
+    });
   },
   init() {
     this.$watch('source', function (source) {
@@ -92,32 +120,9 @@ const KLCheckGroup = SourceComponent.extend({
      * @public
      * @return {object} result 结果
      */
-  validate() {
-    const source = this.data.source;
-    const result = { success: true, message: '' };
-    const required = this.data.required;
-    const min = this.data.min ? this.data.min : required / 1;
-    const max = this.data.max;
-    const checked = source.filter(item => !!item.checked);
-    const len = checked.length;
-
-    if (len < min || len > max) {
-      result.success = false;
-      result.message = this.data.message || `请选择(${min},${max}]个选项`;
-      this.data.state = 'error';
-    } else {
-      result.success = true;
-      result.message = '';
-      this.data.state = '';
-    }
-    this.data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      result,
-    });
-
-    return result;
+  validate(on = '') {
+    const value = this.data.value;
+    return this._validate(on, value, Validation);
   },
   /**
      * method _onCheck() 点击check时,改变对应的value值
diff --git a/src/js/ui-base/_.js b/src/js/ui-base/_.js
index 0e416bb9..2a2bd02a 100644
--- a/src/js/ui-base/_.js
+++ b/src/js/ui-base/_.js
@@ -272,4 +272,11 @@ _.$trans = function (key, self) {
   );
 };
 
+_.isEmpty = function(value){
+  if(value == undefined || value == null || value == '' || (typeof value == 'number' && isNaN(value))){
+    return true;
+  }
+  return false;
+}
+
 module.exports = _;
diff --git a/src/js/util/commonRule.js b/src/js/util/commonRule.js
new file mode 100644
index 00000000..2630bc6f
--- /dev/null
+++ b/src/js/util/commonRule.js
@@ -0,0 +1,20 @@
+const _ = require('../ui-base/_');
+
+module.exports = {
+  noEmpty: {
+    id: 'no-empty',
+    type: 'method',
+    method(value) {
+      return !_.isEmpty(value);
+    },
+    message: _.$trans('PLEASE_SELECT'),
+  },
+  checkRequired: {
+    id: 'check-required',
+    type: 'method',
+    method(value) {
+      return value;
+    },
+    message: _.$trans('PLEASE_SELECT'),
+  },
+};
diff --git a/src/js/util/validation.js b/src/js/util/validation.js
index 83317ffc..055274c7 100644
--- a/src/js/util/validation.js
+++ b/src/js/util/validation.js
@@ -85,9 +85,11 @@ Validation.validate = function (value, rules) {
 
     rule.callback && rule.callback(value, rule);
 
-    if (!rule.success && result.success) {
+    // rule为函数时，可以直接返回字符串作为message
+    if (!(typeof rule.success === 'boolean' && rule.success === true) && result.success) {
       result.success = false;
       result.firstRule = rule;
+      rule.message = rule.message || rule.success;
       // @deprecated
       result.message = rule.message;
     }

From 71fced7ae77695b92b6e820506658ddba27fc7a4 Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Thu, 3 Aug 2017 22:18:03 +0800
Subject: [PATCH 3/7] date-picker and multi-select add rules

---
 src/js/components/form/KLDatePicker/index.js  | 72 +++++++++----------
 src/js/components/form/KLMultiSelect/index.js | 42 +++++------
 2 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/src/js/components/form/KLDatePicker/index.js b/src/js/components/form/KLDatePicker/index.js
index 8733c8b4..193dfe73 100644
--- a/src/js/components/form/KLDatePicker/index.js
+++ b/src/js/components/form/KLDatePicker/index.js
@@ -17,6 +17,7 @@ const polyfill = require('../../../ui-base/polyfill');
 
 const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLDatePicker
@@ -56,20 +57,34 @@ const KLDatePicker = Dropdown.extend({
       _time: undefined,
       autofocus: false,
       required: false,
+      defaultRules: [],
       showTime: false,
       open: false,
     });
     this.supr();
 
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.noEmpty);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'no-empty',
+        );
+      }
+    });
+
     this.$watch('date', function (newValue) {
       // 字符类型自动转为日期类型
       if (typeof newValue === 'string') {
         if (bowser.msie && bowser.version <= 9) {
-          return (this.data.date = polyfill.StringDate(newValue));
+          this.data.date = polyfill.StringDate(newValue);
+          return;
         }
-        return (this.data.date = newValue ? new Date(newValue) : new Date());
+        this.data.date = newValue ? new Date(newValue) : new Date();
+        return;
       } else if (typeof newValue === 'number') {
-        return (this.data.date = new Date(newValue));
+        this.data.date = new Date(newValue);
+        return;
       }
 
       if (newValue === 'Invalid Date' || newValue === 'NaN') {
@@ -79,7 +94,10 @@ const KLDatePicker = Dropdown.extend({
       // 如果不为空并且超出日期范围，则设置为范围边界的日期
       if (newValue) {
         const isOutOfRange = this.isOutOfRange(newValue);
-        if (isOutOfRange) return (this.data.date = isOutOfRange);
+        if (isOutOfRange) {
+          this.data.date = isOutOfRange;
+          return;
+        }
       }
 
       if (newValue) {
@@ -107,9 +125,11 @@ const KLDatePicker = Dropdown.extend({
 
       if (typeof newValue === 'string') {
         if (bowser.msie && bowser.version <= 9) {
-          return (this.data.date = polyfill.StringDate(newValue));
+          this.data.date = polyfill.StringDate(newValue);
+          return;
         }
-        return (this.data.minDate = new Date(newValue));
+        this.data.minDate = new Date(newValue);
+        return;
       }
 
       if (newValue === 'Invalid Date' || newValue === 'NaN') {
@@ -122,9 +142,11 @@ const KLDatePicker = Dropdown.extend({
 
       if (typeof newValue === 'string') {
         if (bowser.msie && bowser.version <= 9) {
-          return (this.data.date = polyfill.StringDate(newValue));
+          this.data.date = polyfill.StringDate(newValue);
+          return;
         }
-        return (this.data.maxDate = new Date(newValue));
+        this.data.maxDate = new Date(newValue);
+        return;
       }
 
       if (newValue === 'Invalid Date' || newValue === 'NaN') {
@@ -149,7 +171,9 @@ const KLDatePicker = Dropdown.extend({
       // 如果不为空并且超出日期范围，则设置为范围边界的日期
       if (this.data.date) {
         const isOutOfRange = this.isOutOfRange(this.data.date);
-        if (isOutOfRange) return (this.data.date = isOutOfRange);
+        if (isOutOfRange) {
+          this.data.date = isOutOfRange;
+        }
       }
     });
 
@@ -241,33 +265,9 @@ const KLDatePicker = Dropdown.extend({
       (maxDate && moment(date).isAfter(maxDate, 'day') && maxDate)
     );
   },
-  validate(on) {
-    const data = this.data;
-    const date = data.date || '';
-
-    const result = date
-      ? Validation.validate(date.toString(), [
-          { type: 'isDate', message: '请填写' },
-      ])
-      : { success: false };
-    if (data.required && !result.success) {
-      result.success = false;
-      result.message = this.data.message || '请填写';
-      this.data.state = 'error';
-    } else {
-      result.success = true;
-      result.message = '';
-      this.data.state = '';
-    }
-    this.data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+  validate(on = '') {
+    const value = this.data.date || '';
+    return this._validate(on, value, Validation);
   },
 });
 
diff --git a/src/js/components/form/KLMultiSelect/index.js b/src/js/components/form/KLMultiSelect/index.js
index ec02ac80..4beafcb0 100644
--- a/src/js/components/form/KLMultiSelect/index.js
+++ b/src/js/components/form/KLMultiSelect/index.js
@@ -6,10 +6,11 @@
  */
 
 const Dropdown = require('../common/Dropdown');
-require('../../../util/validation');
+const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
 const template = require('./index.html');
 const _ = require('../../../ui-base/_');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLMultiSelect
@@ -50,11 +51,22 @@ const KLMultiSelect = Dropdown.extend({
       hierarchical: false,
       updateAuto: false,
       onlyChild: true,
+      required: false,
+      defaultRules: [],
     });
     data._source = _.clone(data.source || []);
     data.tree = [data._source, [], [], [], [], [], [], [], [], []];
     data.search = ['', '', '', '', '', '', '', '', '', ''];
     data.empty = [];
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.noEmpty);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'no-empty',
+        );
+      }
+    });
     this.$watch('source', function (newValue) {
       if (!(newValue instanceof Array)) {
         throw new TypeError('`source` is not an Array!');
@@ -268,31 +280,9 @@ const KLMultiSelect = Dropdown.extend({
     this.initSelected();
     this.watchValue();
   },
-  validate(on) {
-    const data = this.data;
-
-    const result = { success: true, message: '' };
-    let value = this.data.value;
-
-    value = typeof value === 'undefined' ? '' : `${value}`;
-    if (data.required && !value.length) {
-      result.success = false;
-      result.message = data.message || this.$trans('PLEASE_SELECT');
-      data.state = 'error';
-    } else {
-      result.success = true;
-      result.message = '';
-      data.state = '';
-    }
-    data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+  validate(on = '') {
+    const value = this.data.value;
+    return this._validate(on, value, Validation);
   },
 }).filter('search', function (category, search, level) {
   const data = this.data;

From c37b228a7548cbee8258995dc58a16c487d1122e Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Fri, 4 Aug 2017 13:42:26 +0800
Subject: [PATCH 4/7] radioGroup and select and textarea add rules

---
 src/js/components/form/KLRadioGroup/index.js | 38 +++++++---------
 src/js/components/form/KLSelect/index.js     | 47 ++++++++------------
 src/js/components/form/KLTextArea/index.js   | 42 +++--------------
 src/js/util/commonRule.js                    |  5 +++
 4 files changed, 46 insertions(+), 86 deletions(-)

diff --git a/src/js/components/form/KLRadioGroup/index.js b/src/js/components/form/KLRadioGroup/index.js
index 8d6faf22..5150a551 100644
--- a/src/js/components/form/KLRadioGroup/index.js
+++ b/src/js/components/form/KLRadioGroup/index.js
@@ -8,7 +8,9 @@
 const SourceComponent = require('../../../ui-base/sourceComponent');
 const template = require('./index.html');
 const _ = require('../../../ui-base/_');
+const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLRadioGroup
@@ -43,6 +45,7 @@ const KLRadioGroup = SourceComponent.extend({
       selected: null,
       _radioGroupId: new Date(),
       required: false,
+      defaultRules: [],
       nameKey: 'name',
       key: 'id',
     });
@@ -50,6 +53,15 @@ const KLRadioGroup = SourceComponent.extend({
 
     this.initValidation();
 
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.noEmpty);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'no-empty',
+        );
+      }
+    });
     this.$watch('value', function (newValue) {
       const data = this.data;
       const source = data.source;
@@ -120,29 +132,9 @@ const KLRadioGroup = SourceComponent.extend({
      * @public
      * @return {object} result 结果
      */
-  validate(on) {
-    const data = this.data;
-    const result = { success: true, message: '' };
-    const selected = data.selected;
-
-    if (data.required && !selected) {
-      result.success = false;
-      result.message = this.data.message || this.$trans('PLEASE_SELECT');
-      this.data.state = 'error';
-    } else {
-      result.success = true;
-      result.message = '';
-      this.data.state = '';
-    }
-    this.data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+  validate(on = '') {
+    const value = this.data.selected;
+    return this._validate(on, value, Validation);
   },
 });
 
diff --git a/src/js/components/form/KLSelect/index.js b/src/js/components/form/KLSelect/index.js
index e61b735f..d84c4747 100644
--- a/src/js/components/form/KLSelect/index.js
+++ b/src/js/components/form/KLSelect/index.js
@@ -8,10 +8,11 @@
 const Dropdown = require('../common/Dropdown');
 const template = require('./index.html');
 const _ = require('../../../ui-base/_');
-require('../../../util/validation');
+const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
 const Multiple = require('./plugins/multiple');
 const PrivateMethod = require('./plugins/private.method');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLSelect
@@ -83,12 +84,22 @@ const KLSelect = Dropdown.extend({
 
       placeholder: this.$trans('PLEASE_SELECT'),
       required: false,
+      defaultRules: [],
     });
     if (data.multiple && !Array.isArray(data.selected)) {
       data.selected = data.selected ? [data.selected] : [];
     }
     this.supr();
 
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.noEmpty);
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(
+          rule => rule.id !== 'no-empty',
+        );
+      }
+    });
     this.$watch('selected', function (newValue, oldValue) {
       // 因为存在source异步获取的情况 如果source长度为0表示source还未获取
       if (
@@ -126,7 +137,8 @@ const KLSelect = Dropdown.extend({
       const source = data.source;
       const key = data.key;
       if (newValue === undefined || newValue === null) {
-        return (data.selected = newValue);
+        data.selected = newValue;
+        return;
       }
 
       if (source) {
@@ -151,7 +163,8 @@ const KLSelect = Dropdown.extend({
 
     this.$watch('source', function (newValue) {
       if (newValue === undefined) {
-        return (data.selected = undefined);
+        data.selected = undefined;
+        return;
       }
 
       if (!(newValue instanceof Array)) {
@@ -336,31 +349,9 @@ const KLSelect = Dropdown.extend({
     data.canSearch && this.clearSearchValue();
     this.supr(open);
   },
-  validate(on) {
-    const data = this.data;
-
-    const result = { success: true, message: '' };
-    let value = this.data.value;
-
-    value = typeof value === 'undefined' ? '' : `${value}`;
-    if (data.required && !value.length) {
-      result.success = false;
-      result.message = data.message || this.$trans('PLEASE_SELECT');
-      data.state = 'error';
-    } else {
-      result.success = true;
-      result.message = '';
-      data.state = '';
-    }
-    data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+  validate(on = '') {
+    const value = this.data.value;
+    return this._validate(on, value, Validation);
   },
 })
   .use(Multiple)
diff --git a/src/js/components/form/KLTextArea/index.js b/src/js/components/form/KLTextArea/index.js
index 12960780..94bc5333 100644
--- a/src/js/components/form/KLTextArea/index.js
+++ b/src/js/components/form/KLTextArea/index.js
@@ -10,6 +10,7 @@ const template = require('./index.html');
 const _ = require('../../../ui-base/_');
 const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
+const commonRule = require('../../../util/commonRule');
 
 const bowser = require('bowser');
 
@@ -52,6 +53,7 @@ const KLTextArea = Component.extend({
       autofocus: false,
       _eltIE9: bowser.msie && bowser.version <= 9,
       required: false,
+      defaultRules: [],
     });
 
     this.supr();
@@ -59,13 +61,11 @@ const KLTextArea = Component.extend({
     this.initValidation();
   },
   init() {
-    this.$watch('required', function (value) {
-      const rules = this.data.rules;
-      const message = this.data.message || this.$trans('PLEASE_INPUT');
-      if (value) {
-        rules.push({ type: 'isRequired', message });
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push(commonRule.isRequired);
       } else {
-        this.data.rules = rules.filter(rule => rule.type !== 'isRequired');
+        this.data.defaultRules = this.data.defaultRules.filter(rule => rule.id !== 'is-required');
       }
     });
   },
@@ -76,35 +76,7 @@ const KLTextArea = Component.extend({
      */
   validate(on = '') {
     const value = this.data.value;
-    let rules = this.data.rules;
-
-    rules = rules.filter(rule => (rule.on || '').indexOf(on) >= 0);
-
-    const result = Validation.validate(value, rules);
-    if (
-      result.firstRule &&
-      !(
-        result.firstRule.silentOn === true ||
-        (typeof result.firstRule.silentOn === 'string' &&
-          result.firstRule.silentOn.indexOf(on) >= 0)
-      )
-    ) {
-      this.data.tip = result.firstRule.message;
-    } else this.data.tip = '';
-
-    // @TODO
-    if (!result.success) this.data.state = 'error';
-    else {
-      this.data.state = '';
-    }
-
-    this.$emit('validate', {
-      sender: this,
-      on,
-      result,
-    });
-
-    return result;
+    return this._validate(on, value, Validation);
   },
   _onKeyUp($event) {
     this.validate('keyup');
diff --git a/src/js/util/commonRule.js b/src/js/util/commonRule.js
index 2630bc6f..618b97da 100644
--- a/src/js/util/commonRule.js
+++ b/src/js/util/commonRule.js
@@ -17,4 +17,9 @@ module.exports = {
     },
     message: _.$trans('PLEASE_SELECT'),
   },
+  isRequired: {
+    id: 'is-required',
+    type: 'isRequired',
+    message: _.$trans('PLEASE_INPUT'),
+  },
 };

From f57c3e7a891fe85b8bd10ed09ae077af314d8bca Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Fri, 4 Aug 2017 14:27:27 +0800
Subject: [PATCH 5/7] upload add rules

---
 src/js/components/form/KLUpload/index.js | 51 +++++++++++++-----------
 src/js/language/en-US.js                 |  1 +
 src/js/language/zh-CN.js                 |  1 +
 3 files changed, 30 insertions(+), 23 deletions(-)

diff --git a/src/js/components/form/KLUpload/index.js b/src/js/components/form/KLUpload/index.js
index d7ed65a0..92c339c3 100644
--- a/src/js/components/form/KLUpload/index.js
+++ b/src/js/components/form/KLUpload/index.js
@@ -10,6 +10,7 @@ const Config = require('./config');
 const Component = require('../../../ui-base/component');
 const UploadList = require('./components/UploadList');
 const UploadCard = require('./components/UploadCard');
+const Validation = require('../../../util/validation');
 const validationMixin = require('../../../util/validationMixin');
 const tpl = require('./index.html');
 
@@ -65,11 +66,32 @@ const KLUpload = Component.extend({
       imageHeight: Infinity,
       imageScale: '',
       encType: 'multipart/form-data',
+      required: false,
+      defaultRules: [],
     });
 
     this.preProcess(data);
     this.initValidation();
 
+    this.$watch('required', function (newValue) {
+      if (newValue) {
+        this.data.defaultRules.push({
+          id: 'file-required',
+          type: 'method',
+          method(value, rule) {
+            const length = rule.sender.getActiveFileLength(value);
+            if (length === 0) {
+              return false;
+            }
+            return true;
+          },
+          sender: this,
+          message: _.$trans('PLEASE_UPLOAD_AT_ONE_LEAST'),
+        });
+      } else {
+        this.data.defaultRules = this.data.defaultRules.filter(rule => rule.id !== 'file-required');
+      }
+    });
     this.supr(data);
   },
 
@@ -150,30 +172,13 @@ const KLUpload = Component.extend({
     this.$emit('remove', info);
   },
 
-  validate() {
-    const data = this.data;
-    const result = { success: true, message: '' };
-
-    function deletedFilter(file) {
-      return file.flag !== Config.flagMap.DELETED;
-    }
-
-    const filteredFileList = data.fileList.filter(deletedFilter);
-
-    if (filteredFileList.length < data.numMin) {
-      result.success = false;
-      result.message = this.$trans('PLEASE_UPLOAD_ATLEAST') + data.numMin + this.$trans('UNIT') + this.$trans('FILE');
-      this.data.state = 'error';
-    }
-
-    data.tip = result.message;
-
-    this.$emit('validate', {
-      sender: this,
-      result,
-    });
+  validate(on = '') {
+    const value = this.data.fileList;
+    return this._validate(on, value, Validation);
+  },
 
-    return result;
+  getActiveFileLength(fileList) {
+    return fileList.filter(file => file.flag !== Config.flagMap.DELETED).length;
   },
 })
   .component('upload-list', UploadList)
diff --git a/src/js/language/en-US.js b/src/js/language/en-US.js
index af31a275..44cb77ba 100644
--- a/src/js/language/en-US.js
+++ b/src/js/language/en-US.js
@@ -43,4 +43,5 @@ module.exports = {
   PLEASE_UPLOAD_ATLEAST: 'Please upload at least',
   UNIT: '',
   FILE: 'file',
+  PLEASE_UPLOAD_AT_ONE_LEAST: 'Please upload at least one file',
 };
diff --git a/src/js/language/zh-CN.js b/src/js/language/zh-CN.js
index a2a43db7..cf2888e2 100644
--- a/src/js/language/zh-CN.js
+++ b/src/js/language/zh-CN.js
@@ -43,4 +43,5 @@ module.exports = {
   PLEASE_UPLOAD_ATLEAST: '请至少上传',
   UNIT: '个',
   FILE: '文件',
+  PLEASE_UPLOAD_AT_ONE_LEAST: '请至少上传1个文件',
 };

From cfcd46db4c41b538b5a2555081728e69628f56dd Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Fri, 4 Aug 2017 15:28:00 +0800
Subject: [PATCH 6/7] upload add minmax rule

---
 src/js/components/form/KLUpload/index.js | 42 ++++++++++++++++--------
 src/js/language/en-US.js                 |  2 +-
 src/js/language/zh-CN.js                 |  2 +-
 3 files changed, 30 insertions(+), 16 deletions(-)

diff --git a/src/js/components/form/KLUpload/index.js b/src/js/components/form/KLUpload/index.js
index 92c339c3..22372e63 100644
--- a/src/js/components/form/KLUpload/index.js
+++ b/src/js/components/form/KLUpload/index.js
@@ -73,28 +73,42 @@ const KLUpload = Component.extend({
     this.preProcess(data);
     this.initValidation();
 
+    this.data.defaultRules.push(this.createRule('minMax'));
     this.$watch('required', function (newValue) {
       if (newValue) {
-        this.data.defaultRules.push({
-          id: 'file-required',
-          type: 'method',
-          method(value, rule) {
-            const length = rule.sender.getActiveFileLength(value);
-            if (length === 0) {
-              return false;
-            }
-            return true;
-          },
-          sender: this,
-          message: _.$trans('PLEASE_UPLOAD_AT_ONE_LEAST'),
-        });
+        this.data.defaultRules.push(this.createRule('required'));
       } else {
-        this.data.defaultRules = this.data.defaultRules.filter(rule => rule.id !== 'file-required');
+        this.data.defaultRules = this.data.defaultRules.filter(rule => rule.id !== 'required');
       }
     });
     this.supr(data);
   },
 
+  createRule(ruleType) {
+    const _rule = {
+      id: ruleType === 'required' ? 'required' : '',
+      type: 'method',
+      method(value, rule) {
+        const sender = rule.sender;
+        const data = sender.data;
+        const length = sender.getActiveFileLength(value);
+        const min = rule.ruleType === 'required' ? 1 : data.numMin;
+        const max = data.numMax;
+        if (length < min) {
+          return rule.$trans('PLEASE_UPLOAD_ATLEAST') + min + rule.$trans('UNIT') + rule.$trans('FILE');
+        }
+        if (length > max) {
+          return rule.$trans('PLEASE_UPLOAD_ATMOST') + max + rule.$trans('UNIT') + rule.$trans('FILE');
+        }
+        return true;
+      },
+      sender: this,
+      ruleType,
+      $trans: _.$trans,
+    };
+    return _rule;
+  },
+
   preProcess(data) {
     if (typeof data.maxSize === 'number') {
       data.maxSize += '';
diff --git a/src/js/language/en-US.js b/src/js/language/en-US.js
index 44cb77ba..64a78520 100644
--- a/src/js/language/en-US.js
+++ b/src/js/language/en-US.js
@@ -41,7 +41,7 @@ module.exports = {
   IMAGE_HEIGHT_ERROR: 'height error',
   IMAGE_SCALE_ERROR: 'scale error',
   PLEASE_UPLOAD_ATLEAST: 'Please upload at least',
+  PLEASE_UPLOAD_ATMOST: 'Please upload at most',
   UNIT: '',
   FILE: 'file',
-  PLEASE_UPLOAD_AT_ONE_LEAST: 'Please upload at least one file',
 };
diff --git a/src/js/language/zh-CN.js b/src/js/language/zh-CN.js
index cf2888e2..c5d29dd9 100644
--- a/src/js/language/zh-CN.js
+++ b/src/js/language/zh-CN.js
@@ -41,7 +41,7 @@ module.exports = {
   IMAGE_HEIGHT_ERROR: '高度错误',
   IMAGE_SCALE_ERROR: '比例错误',
   PLEASE_UPLOAD_ATLEAST: '请至少上传',
+  PLEASE_UPLOAD_ATMOST: '请最多上传',
   UNIT: '个',
   FILE: '文件',
-  PLEASE_UPLOAD_AT_ONE_LEAST: '请至少上传1个文件',
 };

From 29e1d7b36a7ad28a803b3fa3f5fc5f97178b01fb Mon Sep 17 00:00:00 2001
From: linxingjian <65517293@qq.com>
Date: Fri, 4 Aug 2017 19:40:53 +0800
Subject: [PATCH 7/7] =?UTF-8?q?upload=E6=96=87=E4=BB=B6=E4=B8=8A=E4=BC=A0?=
 =?UTF-8?q?=E8=BE=BE=E5=88=B0=E9=99=90=E5=88=B6=E9=9A=90=E8=97=8F=E4=B8=8A?=
 =?UTF-8?q?=E4=BC=A0=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/form/KLUpload/components/UploadCard/index.html   | 2 +-
 .../components/form/KLUpload/components/UploadList/index.html   | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/js/components/form/KLUpload/components/UploadCard/index.html b/src/js/components/form/KLUpload/components/UploadCard/index.html
index fae0865d..37961038 100644
--- a/src/js/components/form/KLUpload/components/UploadCard/index.html
+++ b/src/js/components/form/KLUpload/components/UploadCard/index.html
@@ -55,7 +55,7 @@
             </div>
             <div class="m-entry-info">{info}</div>
         </div>
-        <div ref="inputwrapper" class="u-input-wrapper" r-hide={readonly} on-click={this.fileDialogOpen()}>
+        <div ref="inputwrapper" class="u-input-wrapper" r-hide={readonly || fileUnitList.length >= numMax} on-click={this.fileDialogOpen()}>
             {#if this.$body}
                 {#inc this.$body}
             {#else}
diff --git a/src/js/components/form/KLUpload/components/UploadList/index.html b/src/js/components/form/KLUpload/components/UploadList/index.html
index a4f042ae..40f21647 100644
--- a/src/js/components/form/KLUpload/components/UploadList/index.html
+++ b/src/js/components/form/KLUpload/components/UploadList/index.html
@@ -23,7 +23,7 @@
                       on-remove={this.onRemove($event)}/>
             </li>
         {/list}
-        <li ref="inputwrapper" class="u-input-wrapper" r-hide={readonly || fileUnitList.length >= limit} on-click={this.fileDialogOpen()}>
+        <li ref="inputwrapper" class="u-input-wrapper" r-hide={readonly || fileUnitList.length >= numMax} on-click={this.fileDialogOpen()}>
             {#if this.$body}
                 {#inc this.$body}
             {#else}