input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验

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

第一步,在 子组件中

blur 事件中派发 blur

@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"/>

{{ errormessage}}

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)

}

}

}

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

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)-输入中即时校验