最近在做管理后台,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] 100. Same Tree 相同树

    Given two binary trees, write a function to check if they are the same or not. Two binary trees are ...

  2. [LeetCode] 597. Friend Requests I: Overall Acceptance Rate 朋友请求 I: 全部的接受率

    In social network like Facebook or Twitter, people send friend requests and accept others’ requests ...

  3. .Net Core 2.0发布到 CentOS

    上一篇 在CentOS 7中 使用 Nginx 反代 .Net Core 中创建的项目是创建的默认项目,现在我们来将我们开发的项目发布到 CentOs 中,反代还是使用 Nginx 1.创建一个 .N ...

  4. ProtoStuff无法反序列化Deprecated注解成员问题记录

    在开发过程中,遇到一个鬼畜的问题,在DO的某个成员上添加@Deprecated注解之后,通过ProtoStuff反序列化得到的DO中,这个成员一直为null:花了不少时间才定位这个问题,特此记录一下 ...

  5. python中使用multipart/form-data请求上传文件

    最近测试的接口是上传文件的接口,上传单个文件,我主要使用了2种方法~ 接口例如: URL: http://www.baidu.com/*** method:post 参数: { "salar ...

  6. 04 javascirpt基础知识---听课笔记

    1.JavaScript概念 一门客户端脚本语言运行在客户端浏览器中的.每一个浏览器都有JavaScript的解析引擎脚本语言:不需要编译,直接就可以被浏览器解析执行了 * 功能:可以来增强用户和ht ...

  7. iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame

    前言    在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin fr ...

  8. libevent实现TCP 客户端

    ibevent实现Tcp Client基于bufferevent实现 #include <stdio.h> #include <unistd.h> #include <s ...

  9. Linux07 查找文件(find、locate)

    一.一般查找:find find  PATH  -name  FILENAME 我们也可是使用 ‘*’ 通配符来模糊匹配要查找的文件名 二.数据库查找:locate locate  FILENAME ...

  10. 【Linux】一步一步学Linux——初识Linux命令解析器(10)

    目录 00. 目录 01. Shell简介 02. Shell分类 03. 交互式shell和非交互式shell 04. 登录shell和非登录shell 05. Shell类型 06. 参考 00. ...