vue2多文本框的表單校驗(yàn)(3)-失去焦點(diǎn)觸發(fā)校驗(yàn)

第一步,在 子組件中

blur 事件中派發(fā) 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)//才真正觸發(fā)this.value的改變

console.log('this.value', this.value)

this.sharedState.bus.$emit('clearInputError',this.nam);

},

blur2: function (val) {

// 沒用 this.val = val //如果缺少,那么ajax 設(shè)置data中的變量時(shí),校驗(yàn)不通過,校驗(yàn)認(rèn)為沒有輸入

// this.value = val

this.$emit('blur', val)

}

}

}

與輸入中即時(shí)校驗(yàn)有兩點(diǎn)區(qū)別:

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

2,即時(shí)校驗(yàn)沒有派發(fā)clearInputError 事件

父組件中注冊clearInputError事件:

this.sharedState.bus.$on('clearInputError',function (name) {

console.log('clear error:',name)

this.errors && this.errors.remove(name)

}.bind(this))

}

請參考我的前幾篇博客:

vue2多文本框的表單校驗(yàn)(1)-提交時(shí)才校驗(yàn)

vue2多文本框的表單校驗(yàn)(2)-輸入中即時(shí)校驗(yàn)

總結(jié)

以上是生活随笔為你收集整理的input失去焦点验证格式_vue2多文本框的表单校验(3)-失去焦点触发校验的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。