最近在做管理后台,vue2.0基于elementui框架进行开发。

elementui的api中表单验证都是单个vue文件的验证。而我的保存按钮放在了父组件了,验证对象为三个子组件
我的灵机一动 想到了解决方法 哈哈哈
1.在三个子组件分别写一个方法用于验证当前表单
  incrementTotal(){
let formName="personSetting"
this.$refs[formName].validate((valid) => {
if (valid) {
this.$emit('submitType',["subject",true])
}else{
this.$emit('submitType',["subject",false])
return false;
}
});
}
注释:{
1.formName="personSetting" 是表单的ref
2.验证成功触发父组件函数并把子组件标示“teacher”和成功的状态true/false 传给父组件
}
 

2.父组件
 <subject ref="subjectchildMethod"  @submitType="getSubmitType" ></subject> //引入子组件
  //父组件中的方法
getSubmitType(type){//获取验证子组件表单的通过状态
if(type[0]=="subject"){
this.teacherSubmit=type[1]
}
},
savePersonData(){//提交的方法
this.$refs.subjectchildMethod.incrementTotal();//触发子组件的验证
if(this.teacherSubmit){//验证通过啦
//可以提交你的数据啦
}
}

elementui 多组件表单验证的更多相关文章

  1. vue elementUI之Form表单 验证

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且 ...

  2. vue+element-ui中的表单验证(电话等等)

    1. 2. 3. ============================================================上代码============================ ...

  3. 如何在Vue的项目里对element的表单验证进行封装

    介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...

  4. element-ui+vuex共享自定义方法进行表单验证 validator

    element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...

  5. vue elementui form表单验证

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...

  6. ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证

    一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...

  7. element-ui表单验证(电话,邮箱)

    element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...

  8. ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题

    试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...

  9. JS组件系列——Form表单验证神器: BootstrapValidator

    前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...

随机推荐

  1. [LeetCode] 387. First Unique Character in a String 字符串的第一个唯一字符

    Given a string, find the first non-repeating character in it and return it's index. If it doesn't ex ...

  2. 阿里云k8s构建镜像时设置版本号用于版本回滚

    jenkins 构建配置参数化构建过程 构建  执行 shell  , 将版本号参数传入 脚本 脚本push  带版本号的镜像到阿里云镜像仓库 #!/bin/bash #获取参数 while geto ...

  3. 【网络开发】详谈socket请求Web服务器过程

    最开始我们需要明白一件事情,因为这是这篇文章的前提: HTTP协议只是一个应用层协议,它底层是通过TCP进行传输数据的.因此,浏览器访问Web服务器的过程必须先有"连接建立"的发生 ...

  4. 手贱重置了mysql密码,导致登陆不进去的解决办法

    上午手残,重置了下MySQL的密码,导致用命令登陆不进去 由于版本的问题,导致网上的方法都不可用 折腾了一上午,摸索+参考官方文档,终于搞定 利用--init-file 第一步,关掉系统服务     ...

  5. NET Core3高性能RPC框架

    NET Core 3.0 使用gRPC 一.前言 在前一文 <ASP.NET Core 3.0 使用gRPC>中有提到 gRPC 支持双向流调用,支持实时推送消息,这也是 gRPC的一大特 ...

  6. LeetCode 131. 分割回文串(Palindrome Partitioning)

    131. 分割回文串 131. Palindrome Partitioning 题目描述 给定一个字符串 s,将 s 分割成一些子串,使每个子串都是回文串. 返回 s 所有可能的分割方案. LeetC ...

  7. python ID3决策树实现

    环境:ubuntu 16.04 python 3.6 数据来源:UCI wine_data(比较经典的酒数据) 决策树要点: 1. 如何确定分裂点(CART ID3 C4.5算法有着对应的分裂计算方式 ...

  8. Asp.netMVC中Ajax.BeginForm上传文件

    做一个上传并解压的功能,解压完了回调,解压多少文件.搞了半天用Ajax.BeginForm.各种坑,后来直接放弃 @using (Ajax.BeginForm("UploadFile&quo ...

  9. System.AccessViolationException处理

    程序出现 System.AccessViolationException异常会终止进程,try catch是无法捕捉的. 有个处理方法在引发异常的发放上面加上 [System.Runtime.Exce ...

  10. ZeroMQ自查手册

    简介 ZMQ (以下 ZeroMQ 简称 ZMQ)是一个简单好用的传输层,像框架一样的一个 socket library,他使得 Socket 编程更加简单.简洁和性能更高.是一个消息处理队列库,可在 ...