element-ui复杂表单校验
复杂表单如下:
<el-form size="mini" :rules="rules" :model="form"
label-width="120px"
label-position="right" >
<el-form-item label="活动名称" prop="name"
:rules="[{required:true,message:'不能为空',trigger:'blur'}]"
>
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="活动场地" prop="address.name"
:rules="[{required:true,message:'不能为空',trigger:'blur'}]" >
<el-input v-model="form.address.name"></el-input>
</el-form-item>
<span v-for="(item,index) in form.sponsor">
<el-form-item :label="'主办方'+(Number(index)+1)"
:prop="'sponsor.'+index+'.name'"
:rules="[{required:true,message:'不能为空',trigger:'blur'}]"
>
<el-input v-model="item.name"></el-input>
</el-form-item>
</span>
<span v-for="(item,index) in form.advices">
<el-form-item label="建议事项"
:prop="'advices.'+index+'.content'"
:rules="[{required:true,message:'不能为空',trigger:'blur'}]"
>
<el-input type="textarea" v-model="item.content"></el-input>
</el-form-item>
<span class="but-words" @click="deleteAdvices(index)">删除</span>
</span>
<br/>
<el-button size="mini" @click="addAdvices">添加建议事项</el-button>
</el-form>
export default {
...
data(){
return {
form:{
name:'',
address:{
id:'',
name:''
},
sponsor:[
{id:'1',name:'Tom'},
{id:'2',name:'Jack'}
],
advices:[]
},
rules:{
//也可以写在data中
//name:[{required:true,message:'不能为空',trigger:'blur'}],
//'address.name':[{required:true,message:'不能为空',trigger:'blur'}],
//'sponsor.0.name':[{required:true,message:'不能为空',trigger:'blur'}]//校验也可以这样写
}
}
},
methods:{
deleteAdvices(idx){
this.form.advices.splice(idx,1)
},
addAdvices(){
let obj = {
content:''
}
this.form.advices.push(obj)
}
}
}
效果图:

element-ui复杂表单校验的更多相关文章
- vue + element ui 阻止表单输入框回车刷新页面
问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...
- element ui form表单清空规则
公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...
- element ui FORM表单
form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...
- vue+element ui 重置表单
<el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...
- vue+element表单校验功能
要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能: 实现这个功能,总共分 ...
- js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)
最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...
- bootstrap+jQuery.validate表单校验
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- jQuery.validate表单校验+bootstrap
谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...
- Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
- Vee-validate 父组件获取子组件表单校验结果
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
随机推荐
- loj#10172 涂抹果酱 (状压DP)
题目: #10172. 「一本通 5.4 练习 1」涂抹果酱 解析: 三进制的状压DP 经过简单的打表发现,在\(m=5\)时最多有\(48\)种合法状态 然后就向二进制一样枚举当前状态和上一层的状态 ...
- ubuntu与centos系统对比
CentOS与Ubuntu该如何选择,哪个更好用.笔者在自媒体平台收集了一些网友的观点,较为经典,分享给大家.至于应该选择哪个,希望看完本文章后,读者心中有数. 观点1:CentOS适用于服务器,Ub ...
- ES6 模块(八)
在node环境中运行需要使用babel命令将ES6代码转换为ES5代码再执行相关文件使用命令直接将src目录下所有ES6代码转换ES5代码到dist目录下: $ babel src --out-dir ...
- 由于找不到mingwm10.dll 由于找不到QtCore4.dll
出现如下错误: 由于找不到mingwm10.dll 由于找不到QtCore4.dll 解决办法 将qt库加入环境变量
- 彻底搞懂JVM类加载器:基本概念
本文阅读时间大约9分钟. 写在前面 在Java面试中,在考察完项目经验.基础技术后,我会根据候选人的特点进行知识深度的考察,如果候选人简历上有写JVM(Java虚拟机)相关的东西,那么我常常会问一些J ...
- 2019牛客国庆day3-G &CF1238E
牛客G: 给定大小为N的数组a[],给定M组关系,让你重排a[],使得sum{M队关系的绝对值之差}最小.首先将a排序,然后依次把a填入数组. 假设i在二进制下有x个1,用dp[i]更新dp[i|(1 ...
- AcWing 24. 机器人的运动范围
习题地址 https://www.acwing.com/solution/acwing/content/2970/ 题目描述地上有一个 m 行和 n 列的方格,横纵坐标范围分别是 0∼m−1 和 0∼ ...
- Python基础之函数定义及文件修改
函数 函数的定义 #登录函数和注册函数 def register(): """注册函数""" username = input('请输入你的 ...
- 分享:手把手教你如何免费且光荣地使用正版IntelliJ IDEA
https://mp.weixin.qq.com/s/6nRYmn6gAWFLg3mUIN_ojg TIPS 近日在个人技术讨论QQ群里,谈论到IDEA的那些事儿.有童鞋居然在某电商网站花钱买激活码. ...
- Pandas | 02 Series 系列
系列(Series)是能够保存任何类型的数据(整数,字符串,浮点数,Python对象等)的一维标记数组.轴标签统称为索引. pandas.Series Pandas系列可以使用以下构造函数创建 - p ...