文档章节

vue2 子组件校验未通过如何通知父组件

黄威
 黄威
发布于 2017/11/14 22:52
字数 460
阅读 128
收藏 7

vue2 子组件校验未通过如何通知父组件

如上图,输入框在子组件(ServiceItemInputPanel)中

输入框只能输入数字,1-9999,如果校验失败,应该让提交按钮(右边标号2)置灰

解决方案:

1,使用 vee-validate框架

官网地址:http://vee-validate.logaretm.com/api.html#directive

子组件中:

<input v-validate="'required|numeric|multiple'" data-vv-as="购买数量" data-vv-validate-on="input"  @input="modifyCounter($event.target.value);validate2($validator,sharedState)" name="multiple2" :value="sharedState.multiple" type="text" >

校验属性说明:

v-validate 表示校验的格式,上例中要求必填,是数字,而且还有自定义的校验规则:multiple

data-vv-as 表示错误信息中的提示 title, 即"姓名不能为空"中的姓名.

data-vv-validate-on 表示触发校验的时机,上例中在输入过程中即时校验,说白了,就是 keyup 事件触发校验.

2,在输入过程中会调用validate2 方法,进行事件派发

methods: {
    validate2: throttle(function ($validator2,sharedState) {
      console.log('updated 111');
//      console.log('this', this);
      $validator2.validate('multiple2').then((validateFlag) => {
        console.log('validateFlag', validateFlag)
        sharedState.bus.$emit('validatemultiple',validateFlag);
      }, err => {
        console.log('校验报错!!!!!')
        console.log(err)
      });
      
    },500)
  }

把校验的结果通过 vue 的 eventbus 进行通知

3,在父组件中注册事件

在钩子事件created中进行注册:

created: function () {
    //做一些初始化操作
    if (!this.placeorderData.userInfo){
      this.placeorderData.userInfo = {}
    }
    this.sharedState.bus.$on('validatemultiple',this.validateMultiple)
  }

注意:

1,

data-vv-validate-on="input"

不能少,不要以为在@ input 事件中绑定了校验的方法就行.

为什么呢?

如果缺少上述语句,那么,输入过程中虽然会调用validate2方法,但是校验框架vee-validate 其实并没有同步输入框的值.

 data-vv-validate-on="input" 表示在@ input 事件中同步输入框的值到vee-validate框架中

2.节流函数throttle 中使用 bind(this)不好使,因运行时的 this 并不是此时绑定的 this

© 著作权归作者所有

共有 人打赏支持
黄威
粉丝 14
博文 52
码字总数 29570
作品 0
昌平
程序员
加载中

评论(1)

一号男嘉宾
一号男嘉宾
楼主有时间写个大文件分片上传的哇
一个 React Form 组件的重构思路

本文发布于 我的博客 最近对团队内部 React 组件库(ne-rc)中的 Form 组件进行了重构,记录一下思考的过程。 一些前置定义: 名词 定义 表单 Form 组件 子表单 嵌套在 Form 下面的类似 Inpu...

moqiao
2017/03/17
0
0
vue2 父子组件实现双向绑定

vue2的版本:"2.5.2" 子组件中TestBiBind this.$emit('update:multiple222', count++) 父组件中 <TestBiBind :multiple222="multiple" @update:multiple222="val => multiple = val"></TestBi......

黄威
2017/11/04
0
0
Vue组件一-父组件传值给子组件

Vue组件一-父组件传值给子组件 开始 Vue组件是学习Vue框架最比较难的部分,而这部分难点我认为可以分为三个部分学习,即 组件的传值 - 父组件向子组件中传值 事件回馈 - 子组件向父组件发送消...

mdiep
05/13
0
0
来点干货:如何基于vue2写一套UI库

又到一年年底,最近在做项目总结,抽了点时间,把公司产品做了规划,把组件整合为Vue UI库(我们用Vue2+),于是造了个轮子,其中包括 基础组件 和 应用组件,目前 组件 和 文档 在不断完善中。...

吖面吖面吖面
2017/12/21
0
0
微信小程序之表单校验

微信小程序之表单校验 亚里士朱德的博客2017-08-2114 阅读 表单校验微信 小程序SDK版本 1.4 表单校验之难 如果要问微信小程序最难实现的公共业务是什么?应该是 表单校验 ,没有之一。原因如...

亚里士朱德的博客
2017/08/21
0
0

没有更多内容

加载失败,请刷新页面

加载更多

用Golang做了一个命令行贪吃蛇游戏

用Golang做了一个命令行贪吃蛇游戏 项目介绍 项目链接:https://gitee.com/lwow2025/snake-go 最近看了一本做几个小项目的书,突然就想用Golang做一个命令行贪吃蛇,也没啥特殊原因。 软件架...

Mediv
27分钟前
0
0
storm的利用并行度提高处理速度的经验

在storm的流计算框架中,在数据量非常大或者计算逻辑比较复杂的情况下,可能会造成处理速度变慢的情况,最后反而不满足了系统的处理要求,因此这里讨论一下。本文的内容是我在storm的使用过程...

飓风2000
36分钟前
0
0
课程推荐|深入浅出区块链博主:全栈区块链开发者的4堂必修课(线上优惠)

Tiny熊从2017年开始更新“深入浅出区块链”博客,在第一篇文章中,关于如何系统学习区块链技术,他这样描述:“从事区块链开发也有很多方向,如:区块链应用开发人员、区块链架构师、底层核心...

HiBlock
48分钟前
0
0
激活win10 亲测有效

1.首先,我们先查看一下Win10正式专业版系统的激活状态: 点击桌面左下角的“Windows”按钮,从打开的扩展面板中依次点击“设置”-“更新和安全”,并切换到“激活”选项卡,在此就可以查看到...

可达鸭眉头一皱
50分钟前
0
0
SpringWind180926

SpringWind SpringWind项目代码学习笔记 /SpringWind/src/main/webapp/WEB-INF/views/login.html 第15行action="#springUrl('/account/login.html')"【为什么是#springUrl】 第4行<a class=......

颖伙虫
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部