feat: 初步完成表单校验

components/pi-form-item/index.vue

@@ -41,9 +41,12 @@
 </template>
 
 <script>
+import Emitter from '../../mixin/emitter'
 import { childInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
+import Schema from '../../plugins/async-validator'
+
 const TAG = 'PiFormItem'
 const { formItem } = getConfig()
 const extendPiFrom = childInit('Form')
@@ -56,7 +59,7 @@ const alignFlexMap = {
 
 export default {
   name: 'FormItem',
-  mixins: [extendPiFrom], // 注入inheritProps
+  mixins: [extendPiFrom, Emitter], // 注入inheritProps
   options: {
     styleIsolation: 'shared'
   },
@@ -172,7 +175,10 @@ export default {
     }
   },
   data() {
-    return { validateMessage: '' }
+    return {
+      validateState: '', // 是否校验成功
+      validateMessage: '' // 校验失败的提示语
+    }
   },
   computed: {
     getBorder() {
@@ -235,9 +241,68 @@ export default {
       }
     }
   },
+  mounted() {
+    this.initRulesValidation()
+  },
   methods: {
     handleItemClick(e) {
       this.$emit('click', e)
+    },
+    initRulesValidation() {
+      // blur事件
+      this.$on('form-blur', () => {
+        this.validation('blur')
+      })
+      // change事件
+      this.$on('form-change', () => {
+        this.validation('change')
+      })
+    },
+    // 从u-form的rules属性中，取出当前u-form-item的校验规则
+    getRules() {
+      // 父组件的所有规则
+      let rules = this._parent.rules
+      rules = rules ? rules[this.prop] : []
+      return [].concat(rules || [])
+    },
+    // 过滤出符合要求的rule规则
+    getFilteredRule(triggerType = '') {
+      let rules = this.getRules()
+      // 整体验证表单时，triggerType为空字符串
+      if (!triggerType) return rules
+      return rules.filter(res => res.trigger && res.trigger.indexOf(triggerType) !== -1)
+    },
+
+    // 校验数据
+    validation(trigger, callback = () => {}) {
+      this.fieldValue = this._parent.model[this.prop]
+      // blur和change是否有当前方式的校验规则
+      const rules = this.getFilteredRule(trigger)
+      if (!rules || rules.length === 0) {
+        return callback('')
+      }
+      // 设置当前的装填，标识为校验中
+      this.validateState = 'validating'
+      // 调用async-validator的方法
+      const validator = new Schema({
+        [this.prop]: rules
+      })
+      validator.validate(
+        {
+          [this.prop]: this.fieldValue
+        },
+        {
+          firstFields: true
+        },
+        (errors, fields) => {
+          console.log(TAG, '表单校验信息', this.prop, errors, fields)
+          // 记录状态和报错信息
+          this.validateState = !errors ? 'success' : 'error'
+          this.validateMessage = errors ? errors[0].message : ''
+          // 调用回调方法
+          callback(this.validateMessage)
+        }
+      )
     }
   }
 }

components/pi-form/index.vue

@@ -12,7 +12,6 @@
 </template>
 
 <script>
-import ValueSync from '../../mixin/value-sync'
 import { parentInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
@@ -23,7 +22,6 @@ const { form } = getConfig()
 export default {
   name: 'Form',
   mixins: [
-    ValueSync, // 混入v-model
     parentInit([
       'height',
       'border',
@@ -39,6 +37,10 @@ export default {
     ])
   ],
   props: {
+    // 表单项值
+    model: {
+      required: false
+    },
     // 自定义样式，对象形式（默认值：{}）
     customStyle: {
       type: Object,
@@ -140,6 +142,17 @@ export default {
       type: Boolean,
       default: form.border
     }
+  },
+  data() {
+    return {
+      rules: {}
+    }
+  },
+  methods: {
+    // 由于多端限制，无法通过props传递方法，通过refs方式在onReady生命周期设置校验规则
+    setRules(rules) {
+      this.rules = rules
+    }
   }
 }
 </script>

components/pi-input/index.vue

@@ -17,6 +17,10 @@
       :selection-end="selectionEnd"
       :selection-start="selectionStart"
       :show-confirm-bar="showConfirmbar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @confirm="handleConfirm"
     />
     <input
       v-else
@@ -30,12 +34,16 @@
       :placeholderStyle="placeholderStyle"
       :disabled="disabled || type === 'select'"
       :maxlength="maxlength"
-      :focus="focus"
+      :focus="focused"
       :confirmType="confirmType"
       :cursor-spacing="cursorSpacing"
       :selection-end="selectionEnd"
       :selection-start="selectionStart"
       :show-confirm-bar="showConfirmbar"
+      @input="handleInput"
+      @blur="handleBlur"
+      @focus="handleFocus"
+      @confirm="handleConfirm"
     />
   </view>
 </template>
@@ -45,16 +53,19 @@
  *
  * @description 输入框
  */
+import Emitter from '../../mixin/emitter'
 import ValueSync from '../../mixin/value-sync'
 import { getConfig } from '../../config'
+import { debounce } from '../../tools/common'
+
 const { input } = getConfig()
 
 const TAG = 'PiInput'
 
 export default {
   name: TAG,
   // 混入v-model
-  mixins: [ValueSync],
+  mixins: [ValueSync, Emitter],
   props: {
     // 初始值
     value: {
@@ -136,7 +147,35 @@ export default {
       default: true
     }
   },
-  computed: {}
+  data() {
+    return {
+      focused: this.focus
+    }
+  },
+  methods: {
+    handleInput: debounce(function(e) {
+      let value = e.detail.value
+      this.$emit('input', value)
+      this.dispatch('Form', 'form-change', value)
+      this.dispatch('FormItem', 'form-change', value)
+    }, 50),
+    handleFocus() {
+      this.focused = true
+      this.$emit('focus')
+    },
+    handleBlur(e) {
+      setTimeout(() => {
+        this.focused = false
+      }, 100)
+      this.$emit('blur', e.detail.value)
+      setTimeout(() => {
+        this.dispatch('FormItem', 'form-blur', e.detail.value)
+      }, 40)
+    },
+    handleConfirm(e) {
+      this.$emit('confirm', e.detail.value)
+    }
+  }
 }
 </script>
 

mixin/emitter.js

@@ -31,7 +31,7 @@ export default {
         parent = parent.$parent
 
         if (parent) {
-          name = parent.$options.componentName
+          name = parent.$options.name
         }
       }
       if (parent) {