Feature #195 form validate

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>
+        <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>

src/js/components/form/KLCheck/index.js

@@ -8,6 +8,9 @@
 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');
+const commonRule = require('../../../util/commonRule');
 
 /**
  * @class KLCheck
@@ -17,6 +20,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 +34,17 @@ const KLCheck = Component.extend({
   config() {
     _.extend(this.data, {
       name: '',
+      rules: [],
+      tip: false,
+      hideTip: false,
+      state: '',
       checked: false,
       block: false,
+      required: false,
+      defaultRules: [],
     });
     this.supr();
-
+    this.initValidation();
     this.$watch('checked', function (newValue, oldValue) {
       if (oldValue === undefined) return;
 
@@ -48,6 +58,19 @@ 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;
+    return this._validate(on, value, Validation);
   },
   /**
      * @method check(checked) 改变选中状态
@@ -56,6 +79,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 +98,6 @@ const KLCheck = Component.extend({
     });
   },
 });
+KLCheck.use(validationMixin);
 
 module.exports = KLCheck;

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;

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值

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);
   },
 });