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)-輸入中即時校驗

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。