refactor(form): support validate callback

demo/documentation/components/form/enUS/customRule.md

@@ -76,12 +76,29 @@ export default {
   methods: {
     handlePasswordInput () {
       if (this.model.reenteredPassword) {
-        this.$refs.reenteredPassword.validate('password-input')
+        this.$refs.reenteredPassword.validate('password-input', ({
+          valid,
+          errors
+        }) => {
+          if (valid) {
+            this.$NMessage.success('password ok')
+          } else {
+            console.log(errors)
+            this.$NMessage.error('password not ok')
+          }
+        })
       }
     },
     handleValidateButtonClick (e) {
       e.preventDefault()
-      this.$refs.form.validate()
+      this.$refs.form.validate((valid, errors) => {
+        console.log(valid, errors)
+        if (valid) {
+          this.$NMessage.success(String(valid))
+        } else {
+          this.$NMessage.error(String(valid))
+        }
+      })
     },
     validatePasswordStartWith (rule, value) {
       return this.model.password && this.model.password.startsWith(value) && this.model.password.length >= value.length

demo/documentation/components/form/enUS/debug.md

@@ -212,7 +212,14 @@ export default {
   methods: {
     handleValidateButtonClick (e) {
       e.preventDefault()
-      this.$refs.form.validate()
+      this.$refs.form.validate((valid, errors) => {
+        console.log(valid, errors)
+        if (valid) {
+          this.$NMessage.success(String(valid))
+        } else {
+          this.$NMessage.error(String(valid))
+        }
+      })
     }
   }
 }

demo/documentation/components/form/enUS/inline.md

@@ -60,7 +60,14 @@ export default {
   methods: {
     handleValidateClick (e) {
       e.preventDefault()
-      this.$refs.form.validate()
+      this.$refs.form.validate((valid, errors) => {
+        if (valid) {
+          this.$NMessage.success(String(valid))
+        } else {
+          console.log(errors)
+          this.$NMessage.error(String(valid))
+        }
+      })
     }
   }
 }

demo/documentation/components/form/enUS/left.md

@@ -207,7 +207,14 @@ export default {
   methods: {
     handleValidateButtonClick (e) {
       e.preventDefault()
-      this.$refs.form.validate()
+      this.$refs.form.validate((valid, errors) => {
+        console.log(valid, errors)
+        if (valid) {
+          this.$NMessage.success(String(valid))
+        } else {
+          this.$NMessage.error(String(valid))
+        }
+      })
     }
   }
 }

packages/common/Form/src/FormItem.vue

@@ -198,20 +198,50 @@ export default {
   },
   methods: {
     handleContentBlur () {
-      this.validate('blur')
+      this._validate('blur')
     },
     handleContentChange () {
-      this.validate('change')
+      this._validate('change')
     },
     handleContentFocus () {
-      this.validate('focus')
+      this._validate('focus')
     },
     handleContentInput () {
-      this.validate('input')
+      this._validate('input')
     },
-    validate (trigger = null, options = null) {
+    validate (trigger = null, afterValidate, options = null) {
+      return new Promise((resolve, reject) => {
+        this._validate(trigger, options).then(({
+          valid,
+          errors
+        }) => {
+          if (valid) {
+            if (afterValidate) {
+              afterValidate({
+                valid
+              })
+            } else {
+              resolve()
+            }
+          } else {
+            if (afterValidate) {
+              afterValidate({
+                valid,
+                errors
+              })
+            } else {
+              // eslint-disable-next-line prefer-promise-reject-errors
+              reject({
+                errors
+              })
+            }
+          }
+        })
+      })
+    },
+    _validate (trigger = null, options = null) {
       if (!this.path) {
-        return
+        throw new Error('[naive-ui/form-item/validate]: validate form-item without path')
       }
       if (!options) {
         options = {}
@@ -221,26 +251,46 @@ export default {
       const rules = this.synthesizedRules
       const path = this.path
       const value = get(this.NForm.model, this.path, null)
-      const activeRules = !trigger ? rules : rules.filter(rule => {
+      const activeRules = (!trigger ? rules : rules.filter(rule => {
         if (Array.isArray(rule.trigger)) {
           return rule.trigger.includes(trigger)
         } else {
           return rule.trigger === trigger
         }
+      })).map(rule => {
+        const originValidator = rule.validator
+        if (typeof originValidator === 'function') {
+          rule.validator = (...args) => {
+            const validateResult = originValidator(...args)
+            if (validateResult instanceof Error) {
+              return validateResult
+            }
+            return !!validateResult
+          }
+        }
+        return rule
       })
-      if (!activeRules.length) return
+      if (!activeRules.length) {
+        return Promise.resolve({
+          valid: true
+        })
+      }
       const validator = new Schema({ [path]: activeRules })
-      // console.log(trigger, { [path]: value })
+      return new Promise((resolve, reject) => {
         validator.validate({ [path]: value }, options, (errors, fields) => {
-        // console.log('validate', errors, fields)
-        // debugger
           if (errors && errors.length) {
             this.explains = errors.map(error => error.message)
-          this.validated = true
+            resolve({
+              valid: false,
+              errors
+            })
           } else {
             this.cleanValidationEffect()
+            resolve({
+              valid: true
+            })
           }
-        // callback((errors && errors[0].message) || false, fields)
+        })
       })
     },
     cleanValidationEffect () {

packages/common/Form/src/FormItemCol.vue

@@ -4,15 +4,26 @@ import NCol from '../../Grid/src/Col'
 
 export default {
   name: 'NFormItemCol',
-  functional: true,
-  render (h, context) {
+  props: {
+    ...NCol.props,
+    ...NFormItem.props
+  },
+  methods: {
+    validate (...args) {
+      if (this.$refs.formItem) {
+        return this.$refs.formItem.validate(...args)
+      }
+    }
+  },
+  render (h) {
     return h(NCol, {
-      props: context.props,
+      props: { ...this.$props },
       scopedSlots: {
         default: () => {
           return h(NFormItem, {
-            props: context.props,
-            scopedSlots: context.scopedSlots
+            ref: 'formItem',
+            props: { ...this.$props },
+            scopedSlots: this.$scopedSlots
           })
         }
       }

packages/common/Form/src/FormItemRow.vue

@@ -1,20 +1,32 @@
 <script>
 import NFormItemCol from './FormItemCol'
 import NRow from '../../Grid/src/main'
+import NFormItem from './FormItem'
 
 export default {
   name: 'NFormItemRow',
-  functional: true,
-  render (h, context) {
+  props: {
+    ...NRow.props,
+    ...NFormItem.props
+  },
+  methods: {
+    validate (...args) {
+      if (this.$refs.formItemCol) {
+        return this.$refs.formItemCol.validate(...args)
+      }
+    }
+  },
+  render (h) {
     return h(NRow, {
-      props: context.props,
+      props: { ...this.$props },
       scopedSlots: {
         default: () => h(NFormItemCol, {
+          ref: 'formItemCol',
           props: {
             span: 24,
-            ...context.props
+            ...this.$props
           },
-          scopedSlots: context.scopedSlots
+          scopedSlots: this.$scopedSlots
         })
       }
     })

packages/common/Form/src/main.vue

@@ -71,22 +71,35 @@ export default {
      * @param {Array} scope  to specify the scope of validation
      * @return {Boolean} validation passed or not
      */
-    validate (callback, shouldFieldBeValidated = () => true) {
-      console.log(this.items)
-      let valid = true
-      let fields = {}
+    validate (afterValidate, shouldFieldBeValidated = () => true) {
+      return new Promise((resolve, reject) => {
+        const validateFormItemInstances = []
         for (const key of Object.keys(this.items)) {
           const formItemInstances = this.items[key]
           for (const formItemInstance of formItemInstances) {
-          if (shouldFieldBeValidated(formItemInstance.path)) {
-            formItemInstance.validate()
+            if (formItemInstance.path) {
+              validateFormItemInstances.push(formItemInstance._validate())
             }
           }
         }
-      if (callback) {
-        callback(valid, fields)
+        Promise
+          .all(validateFormItemInstances)
+          .then(results => {
+            if (results.some(result => !result.valid)) {
+              const errors = results.filter(result => result.errors).map(result => result.errors)
+              if (afterValidate) {
+                afterValidate(false, errors)
+              } else {
+                reject(errors)
               }
-      return Promise.resolve(valid)
+            } else {
+              if (afterValidate) afterValidate(true)
+              else {
+                resolve()
+              }
+            }
+          })
+      })
     },
     resetForm (target = this) {
       for (const key of Object.keys(this.items)) {