feat(Form Validation): Add throttle to form validation

Author: webzhao

src/components/form/index.md

@@ -467,13 +467,15 @@ Clair 目前支持验证的 `type` 有：
 
 某些情况下，输入的验证过程是异步的（比如需要调用服务器端接口去验证）。你可以自定义一个异步的验证函数，让这个函数返回一个 `Promise` 即可。
 
+对于需要访问 HTTP 接口进行异步校验的场景，我们通常需要对验证函数进行节流处理。通过 `validate-throttle` 属性可以指定进行验证的最小时间间隔。
+
 ```html
-<c-input v-model="user" :rules="rules" placeholder="请输入用户名" />
+<c-input v-model="user" :rules="rules" placeholder="请输入用户名" :validate-throttle="500" />
 
 <script>
   const rules = {
-    required: true,
     available: function (val) {
+      console.log(`validating value ${val}`)
       return new Promise((resolve, reject) => {
         // 这里模拟一个异步验证
         setTimeout(() => {

src/scripts/mixins/validatable/index.js

@@ -3,13 +3,18 @@
  */
 import Validator from './validator.js'
 import { isPromise } from './util.js'
+import throttle from 'lodash/throttle'
 
 export default {
 
   props: {
     rules: {
       type: Object,
       default: _ => ({})
+    },
+    validateThrottle: {
+      type: Number,
+      default: 0
     }
   },
 
@@ -22,7 +27,8 @@ export default {
         dirty: false
       },
       isValidatable: true,
-      asyncValidationId: 0
+      // id of the latest validation
+      validationId: 0
     }
   },
 
@@ -59,7 +65,16 @@ export default {
   watch: {
     value () {
       if (this.validity.dirty) {
-        this.validate()
+        this.throttledValidate()
+      }
+    },
+    validateThrottle: {
+      immediate: true,
+      handler (duration) {
+        if (!duration) this.throttledValidate = this.validate
+        this.throttledValidate = throttle(this.validate, duration, {
+          trailing: true
+        })
       }
     }
   },
@@ -78,16 +93,17 @@ export default {
       }
       const result = Validator.validate(this.value, rules)
       const setValidity = v => Object.assign(this.validity, v)
-      if (isPromise(result)) {
-        this.asyncValidationId++
-        (() => {
-          const id = this.asyncValidationId
+      const isLatest = id => this.validationId === id
+      {
+        this.validationId++
+        let { validationId } = this
+        if (isPromise(result)) {
           result.then(v => {
-            if (this.asyncValidationId === id) setValidity(v)
+            if (isLatest(validationId)) setValidity(v)
           })
-        })()
-      } else {
-        setValidity(result)
+        } else {
+          setValidity(result)
+        }
       }
       return result
     },