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