vue2多文本框的表单校验(3)-失去焦点触发校验

第一步,在 子组件中

blur 事件中派发 blur

<template>
<div>
        <input
                @blur="blur2($event.target.value)"  @input="inputAction($event.target.value)"
                v-bind:name="nam" :value="value" class="inf-input" :class="className"
                type="text" :placeholder="placeholder"
                autocomplete="off"/>
        <span v-show=" haserror " class="warning fz12">{{ errormessage}}</span>
    </div>

</template>
<script>
  import sharedStateMixin from '@/services/status/sharedState.mixin'
  export default {
    mixins: [sharedStateMixin],
    props: ['nam', 'className', 'value', 'v_validate', 'data_vv_as', 'placeholder', 'haserror', 'errormessage', 'clicksubmit'],

 methods: {
      inputAction: function (val2) { //keyup
//        this.val = val2
//        this.value = val2
        this.$emit('input', val2)
//        this.$emit('blur', val2)//才真正触发this.value的改变
        console.log('this.value', this.value)

        this.sharedState.bus.$emit('clearInputError',this.nam);
 },
      blur2: function (val) {
//   没用     this.val = val //如果缺少,那么ajax 设置data中的变量时,校验不通过,校验认为没有输入
//        this.value = val

        this.$emit('blur', val)
}
   }
  }
</script>

与输入中即时校验有两点区别:

1,this.$emit('blur', val) 没有放在 input 事件中,而是放在 blur 中.

2,即时校验没有派发clearInputError 事件

父组件中注册clearInputError事件:

 this.sharedState.bus.$on('clearInputError',function (name) {
        console.log('clear error:',name)
        this.errors && this.errors.remove(name)
      }.bind(this))
    }

请参考我的前几篇博客:

vue2多文本框的表单校验(1)-提交时才校验

vue2多文本框的表单校验(2)-输入中即时校验