elementui 多组件表单验证
最近在做管理后台,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 多组件表单验证的更多相关文章
- vue elementUI之Form表单 验证
首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且 ...
- vue+element-ui中的表单验证(电话等等)
1. 2. 3. ============================================================上代码============================ ...
- 如何在Vue的项目里对element的表单验证进行封装
介绍需求 熟悉并优化公司项目的第五天,领导说能不能把表单验证封装一下,我打开代码一看 由于是后台管理系统,无数个需要验证的输入框,由于截图长度受限,只能展示部分,类似于这种页面还有无数个!代码重复率非 ...
- element-ui+vuex共享自定义方法进行表单验证 validator
element-ui的官网上写的自定义表单验证,方法都是写在单vue文件中的,不容易共享.怎么使用vuex将方法共享出来,各个组件都能用呢? 如下是一个验证age的数据, rules:{ age:[{ ...
- vue elementui form表单验证
最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正, ...
- ElementUI使用问题记录:设置路由+iconfont图标+自定义表单验证
一.关于导航怎么设置路由 1.在el-menu这个标签的属性中添加 router ,官方文档的解释是:启用vue-router 这种模式 2.在el-menu-item标签中的index属性直接书写路 ...
- element-ui表单验证(电话,邮箱)
element-ui Form表单验证 最近刚好使用了element-ui的form表单,官网只提供的示例,这里把一些常用的验证记录下来,方便后期查找最终的效果是这样的, 这个表单里还加入了一下其他组 ...
- ElementUI表单验证攻略:解决表单项启用和禁用验证的切换,以及动态表单验证的综合性问题
试想一种比较复杂的业务场景: 表格(el-table)的每一行数据的第一列是勾选框,最后一列是输入框.当某一行的勾选框勾上时,启用该行的输入框,并开启该行输入框的表单验证:取消该行的勾选框,则禁用该行 ...
- JS组件系列——Form表单验证神器: BootstrapValidator
前言:做Web开发的我们,表单验证是再常见不过的需求了.友好的错误提示能增加用户体验.博主搜索bootstrap表单验证,搜到的结果大部分都是文中的主题:bootstrapvalidator.今天就来 ...
随机推荐
- 【C/C++开发】C++实现字符串替换的两种方法
替换字符串replace() erase() //C++ 第一种替换字符串的方法用replace()|C++ 第二种替换字符串的方法用erase()和insert()[ C++string|C++ r ...
- (CSDN迁移)js中的判空
<c:if test="${something.something == NaN}">style="display: none;"</c:if ...
- (转)JVM原理讲解和调优
背景:jvm实际调优在面试时候经常被问到,所以有必要认真总结一番. 转自:JVM原理讲解和调优 四.JVM内存调优 首先需要注意的是在对JVM内存调优的时候不能只看操作系统级别Java进程所占用的内存 ...
- mysql 的日期和时间函数
执行函数方式 select 函数 函数名称 函 数 功 能 CURDATE() 获取当前日期 CURTIME() 获取当前时间 NOW() 获取当前的日期和时间 UNIX_TIMESTAMP ...
- linux系统状态脚本
#!/bin/bashprintf "%10s\n" "##主机名##"printf "%-10s\n" "$(hostname) ...
- Delphi 10.2 JSON与对象/结构体序列化性能提高100多倍
今天在盒子闲逛,无意中看到有人说XE7自带的Json对象序列化很慢,帖子在这里:http://bbs.2ccc.com/topic.asp?topicid=464378;经过测试的确如此. 但 ...
- eclipse 无法启动,JAVA_HOME 失效
主要是因为JDK和eclipse 版本不兼容导致的,4位jdk配64位eclipse,32位jdk配32位eclipse; Java 设置JAVA_HOME无效 其根本原因是%JAVA_HOME%在p ...
- gitlab-runner 的 executors 之 docker
gitlab-runner 的 executors 之 docker GitLab Runner 实现了许多执行程序,可用于在不同的场景中运行构建.所有执行程序分别为: SSH Shell Paral ...
- Future Failure CodeForces - 838C (博弈论,子集卷积)
大意: 两人轮流操作一个长$n$, 只含前$k$种小写字母的串, 每次操作删除一个字符或者将整个串重排, 每次操作后得到的串不能和之前出现过的串相同, 求多少种串能使先手必胜. 找下规律发现$n$为奇 ...
- Web SSH远程连接利器:gotty
Web SSH远程连接利器:gotty 这个东东能让你使用浏览器连接你远程的机器! 一. 环境准备 下载https://github.com/yudai/gotty. 请先配置好 Golang 环境, ...