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

最新推荐文章于 2024-08-07 10:22:18 发布

weixin_33724046

最新推荐文章于 2024-08-07 10:22:18 发布

阅读量1k

点赞数

文章标签： javascript python 前端 ViewUI

原文链接：https://my.oschina.net/huangweiindex/blog/1574769

版权

2019独角兽企业重金招聘Python工程师标准>>>

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

第一步:封装子组件

<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)
}
 }
  }
</script>

注意:在@ input 事件中同时派发了 input 和 blur 事件

第二步,在父组件中使用

   <validate-input :haserror="errors.has('invoice_phone')" :errormessage="errors.first('invoice_phone')"
                                        data-vv-name="invoice_phone" nam="invoice_phone"
                                        data-vv-value-path="value"
                                        v-validate="'required|mobile'"
                                        data-vv-as="手机号"
                                             placeholder="请填写签收人手机号" 
v-model="invoice_dto.deliverPhone" ></validate-input>

参考我的上一篇博客: vue2多文本框的表单校验(1)-提交时才校验

转载于:https://my.oschina.net/huangweiindex/blog/1574769