feat(trigger): support validation trigger

Related #58 #150

src/directives/validate.js

@@ -16,7 +16,19 @@ export default function (Vue) {
 
   Vue.directive('validate', {
     priority: vIf.priority + 1,
-    params: ['group', 'field'],
+    params: ['group', 'field', 'detect-blur', 'detect-change'],
+
+    paramWatchers: {
+      detectBlur (val, old) {
+        this.validation.detectBlur = this.isDetectBlur(val) 
+        this.validator.validate()
+      },
+
+      detectChange (val, old) {
+        this.validation.detectChange = this.isDetectChange(val)
+        this.validator.validate()
+      }
+    },
 
     bind () {
       if (this.el.__vue__) {
@@ -54,7 +66,7 @@ export default function (Vue) {
         this.handleArray(value)
       }
 
-      this.validator.validate(this.validation)
+      this.validator.validate()
     },
 
     unbind () {
@@ -72,7 +84,9 @@ export default function (Vue) {
       this.field = _.camelize(this.arg ? this.arg : params.field)
 
       this.validation = validator.manageValidation(
-        this.field, model, this.vm, this.frag.node, this._scope
+        this.field, model, this.vm, this.frag.node, this._scope, 
+        this.isDetectBlur(this.params.detectBlur), 
+        this.isDetectChange(this.params.detectChange)
       )
 
       if (params.group) {
@@ -91,7 +105,6 @@ export default function (Vue) {
           || el.tagName === 'SELECT') && !model) {
         this.onChange = _.bind(validation.listener, validation)
         _.on(el, 'change', this.onChange)
-
       } else if (el.type === 'checkbox') {
         if (!model) {
           this.onChange = _.bind(validation.listener, validation)
@@ -185,6 +198,14 @@ export default function (Vue) {
           this.validation.setValidation(key, val)
         }
       }, this)
+    },
+
+    isDetectBlur (detectBlur) {
+      return detectBlur === undefined || detectBlur === 'on' || detectBlur === true
+    },
+
+    isDetectChange (detectChange) {
+      return detectChange === undefined || detectChange === 'on' || detectChange === true
     }
   })
 }

src/validations/base.js

@@ -7,7 +7,7 @@ import util, { empty, each, trigger } from '../util'
 
 export default class BaseValidation {
 
-  constructor (field, model, vm, el, scope, validator) {
+  constructor (field, model, vm, el, scope, validator, detectBlur, detectChange) {
     this.field = field
     this.touched = false
     this.dirty = false
@@ -21,6 +21,24 @@ export default class BaseValidation {
     this._forScope = scope
     this._init = this._getValue(el)
     this._validators = {}
+    this._detectBlur = detectBlur
+    this._detectChange = detectChange
+  }
+
+  get detectChange () {
+    return this._detectChange
+  }
+
+  set detectChange (val) {
+    this._detectChange = val
+  }
+
+  get detectBlur () {
+    return this._detectBlur
+  }
+
+  set detectBlur (val) {
+    this._detectBlur = val
   }
 
   manageElement (el) {
@@ -30,6 +48,9 @@ export default class BaseValidation {
       el.value = scope.$get(model) || ''
       this._unwatch = scope.$watch(model, (val, old) => {
         if (val !== old) {
+          if (this.guardValidate(el, 'input')) {
+            return
+          }
           this.handleValidate(el)
         }
       }, { deep: true })
@@ -88,6 +109,9 @@ export default class BaseValidation {
       return
     }
 
+    if (this.guardValidate(e.target, e.type)) {
+      return
+    }
     this.handleValidate(e.target, e.type)
   }
 
@@ -177,6 +201,26 @@ export default class BaseValidation {
     this._init = this._getValue(this._el)
   }
 
+  guardValidate (el, type) {
+    if (type && type === 'blur' && !this.detectBlur) {
+      return true
+    }
+
+    if (type && type === 'input' && !this.detectChange) {
+      return true
+    }
+
+    if (type && type === 'change' && !this.detectChange) {
+      return true
+    }
+
+    if (type && type === 'click' && !this.detectChange) {
+      return true
+    }
+
+    return false
+  }
+
   _getValue (el) {
     return el.value
   }

src/validations/checkbox.js

@@ -8,8 +8,8 @@ import BaseValidation from './base'
 
 export default class CheckboxValidation extends BaseValidation {
 
-  constructor (field, model, vm, el, scope, validator) {
-    super(field, model, vm, el, scope, validator)
+  constructor (field, model, vm, el, scope, validator, detectBlur, detectChange) {
+    super(field, model, vm, el, scope, validator, detectBlur, detectChange)
 
     this._inits = []
   }
@@ -24,6 +24,9 @@ export default class CheckboxValidation extends BaseValidation {
         this._setChecked(value, item.el)
         item.unwatch = scope.$watch(model, (val, old) => {
           if (val !== old) {
+            if (this.guardValidate(item.el, 'change')) {
+              return
+            }
             this.handleValidate(item.el)
           }
         })
@@ -34,6 +37,9 @@ export default class CheckboxValidation extends BaseValidation {
         item.value = el.value
         item.unwatch = scope.$watch(model, (val, old) => {
           if (val !== old) {
+            if (this.guardValidate(el, 'change')) {
+              return
+            }
             this.handleValidate(el)
           }
         })

src/validations/radio.js

@@ -8,8 +8,8 @@ import BaseValidation from './base'
 
 export default class RadioValidation extends BaseValidation {
 
-  constructor (field, model, vm, el, scope, validator) {
-    super(field, model, vm, el, scope, validator)
+  constructor (field, model, vm, el, scope, validator, detectBlur, detectChange) {
+    super(field, model, vm, el, scope, validator, detectBlur, detectChange)
 
     this._inits = []
   }
@@ -23,6 +23,9 @@ export default class RadioValidation extends BaseValidation {
       this._setChecked(value, el, item)
       item.unwatch = scope.$watch(model, (val, old) => {
         if (val !== old) {
+          if (this.guardValidate(item.el, 'change')) {
+            return
+          }
           this.handleValidate(el)
         }
       })

src/validations/select.js

@@ -7,8 +7,8 @@ import BaseValidation from './base'
 
 export default class SelectValidation extends BaseValidation {
 
-  constructor (field, model, vm, el, scope, validator) {
-    super(field, model, vm, el, scope, validator)
+  constructor (field, model, vm, el, scope, validator, detectBlur, detectChange) {
+    super(field, model, vm, el, scope, validator, detectBlur, detectChange)
 
     this._multiple = this._el.hasAttribute('multiple')
   }
@@ -24,6 +24,9 @@ export default class SelectValidation extends BaseValidation {
         let values1 = !Array.isArray(val) ? [val] : val
         let values2 = !Array.isArray(old) ? [old] : old
         if (values1.slice().sort().toString() !== values2.slice().sort().toString()) {
+          if (this.guardValidate(el, 'change')) {
+            return
+          }
           this.handleValidate(el)
         }
       })

src/validator.js

@@ -169,17 +169,25 @@ export default class Validator {
     return ret
   }
 
-  manageValidation (field, model, vm, el, scope) {
+  manageValidation (field, model, vm, el, scope, detectBlur, detectChange) {
     let validation = null
 
     if (el.tagName === 'SELECT') {
-      validation = this._manageSelectValidation(field, model, vm, el, scope)
+      validation = this._manageSelectValidation(
+        field, model, vm, el, scope, detectBlur, detectChange
+      )
     } else if (el.type === 'checkbox') {
-      validation = this._manageCheckboxValidation(field, model, vm, el, scope)
+      validation = this._manageCheckboxValidation(
+        field, model, vm, el, scope, detectBlur, detectChange
+      )
     } else if (el.type === 'radio') {
-      validation = this._manageRadioValidation(field, model, vm, el, scope)
+      validation = this._manageRadioValidation(
+        field, model, vm, el, scope, detectBlur, detectChange
+      )
     } else {
-      validation = this._manageBaseValidation(field, model, vm, el, scope)
+      validation = this._manageBaseValidation(
+        field, model, vm, el, scope, detectBlur, detectChange
+      )
     }
 
     return validation
@@ -197,8 +205,10 @@ export default class Validator {
     }
   }
 
-  _manageBaseValidation (field, model, vm, el, scope) {
-    let validation = this._validations[field] = new BaseValidation(field, model, vm, el, scope, this)
+  _manageBaseValidation (field, model, vm, el, scope, detectBlur, detectChange) {
+    let validation = this._validations[field] = new BaseValidation(
+      field, model, vm, el, scope, this, detectBlur, detectChange
+    )
     validation.manageElement(el)
     return validation
   }
@@ -213,10 +223,10 @@ export default class Validator {
     }
   }
 
-  _manageCheckboxValidation (field, model, vm, el, scope) {
+  _manageCheckboxValidation (field, model, vm, el, scope, detectBlur, detectChange) {
     let validationSet = this._checkboxValidations[field]
     if (!validationSet) {
-      let validation = new CheckboxValidation(field, model, vm, el, scope, this)
+      let validation = new CheckboxValidation(field, model, vm, el, scope, this, detectBlur, detectChange)
       validationSet = { validation: validation, elements: 0 }
       this._checkboxValidations[field] = validationSet
     }
@@ -239,10 +249,10 @@ export default class Validator {
     }
   }
 
-  _manageRadioValidation (field, model, vm, el, scope) {
+  _manageRadioValidation (field, model, vm, el, scope, detectBlur, detectChange) {
     let validationSet = this._radioValidations[field]
     if (!validationSet) {
-      let validation = new RadioValidation(field, model, vm, el, scope, this)
+      let validation = new RadioValidation(field, model, vm, el, scope, this, detectBlur, detectChange)
       validationSet = { validation: validation, elements: 0 }
       this._radioValidations[field] = validationSet
     }
@@ -265,8 +275,10 @@ export default class Validator {
     }
   }
 
-  _manageSelectValidation (field, model, vm, el, scope) {
-    let validation = this._validations[field] = new SelectValidation(field, model, vm, el, scope, this)
+  _manageSelectValidation (field, model, vm, el, scope, detectBlur, detectChange) {
+    let validation = this._validations[field] = new SelectValidation(
+        field, model, vm, el, scope, this, detectBlur, detectChange
+    )
     validation.manageElement(el)
     return validation
   }
@@ -305,7 +317,7 @@ export default class Validator {
     }
   }
 
-  validate (validation) {
+  validate () {
     each(this._validations, (validation, key) => {
       let res = validation.validate()
       util.Vue.set(this._scope, key, res)