复杂表单如下:

<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复杂表单校验的更多相关文章

  1. vue + element ui 阻止表单输入框回车刷新页面

    问题 在 vue+element ui 中只有一个输入框(el-input)的情况下,回车会提交表单. 解决方案 在 el-form 上加上 @submit.native.prevent 这个则会阻止 ...

  2. element ui form表单清空规则

    公司项目重构,经过商定使用element ui.在重构项目的时候发现一下element ui上很蛋疼的东西. 例如,这个form表单就是一个.趁着在高铁上没事,把想写的东西写一下. 先说一下eleme ...

  3. element ui FORM表单

    form表单 Form-Item Slot [label] 旧版语法 <el-form-item label="活动名称" prop="name"> ...

  4. vue+element ui 重置表单

    <el-dialog :title="addForm.title" :visible.sync="dialogFormVisible" width=&qu ...

  5. vue+element表单校验功能

    要实现这个功能其实并不难,element组件直接用就可以, 但是我在使用过程中碰到了几个坑,就记录下来,分享给大家,避免落坑,话不多说,直接上过程...... 表单校验功能:   实现这个功能,总共分 ...

  6. js--吐血总结最近遇到的变态表单校验---element+原生+jq+easyUI(前端职业生涯见过的最烦的校验)

    最近写了无数各种形式的表单,记录下奇奇怪怪的校验规则~ 一:首先是element自带的rules校验规则: element作为常用框架,自带rules属性简单易懂,官方文档一目了然,不再赘述,应付常用 ...

  7. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  9. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  10. Vee-validate 父组件获取子组件表单校验结果

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

随机推荐

  1. 浅谈Nginx以及特性

    Nginx以及特性 1.Nginx是什么? Nginx是一个高性能的HTTP和反向代理轻量级web服务器,特点:占用内存少,处理并发能力强.Nginx专为性能优化而开发,性能是其最重要的考量 ,能经受 ...

  2. 斐波那契查找(Fibonacci Search)

    斐波那契查找 斐波那契查找就是在二分查找的基础上根据斐波那契数列进行分割的.   在斐波那契数列找一个等于略大于查找表中元素个数的数F[n],将原查找表扩展为长度为F[n](如果要补充元素,则补充重复 ...

  3. kubernetes学习控制器之StatefulSet控制器

    StatefulSet介绍 一.StatefulSet概述 StatefulSet是用来管理stateful(有状态)应用的StatefulSet管理Pod时,确保Pod有一个按序增长的ID与Depl ...

  4. ELK日志系统之kibana的使用操作

    1.ELK日志系统打开后,打开kibana的操作界面,第一步创建索引模式: 第2步:创建日志索引 第3步:创建成功 第4步:查看30分钟时间段内的日志数据,也可以查今天的,今月的,今年的 放牛去

  5. Linux从入门到放弃、零基础入门Linux(第四篇):在虚拟机vmware中安装centos7.7

    如果是新手,建议安装带图形化界面的centos,这里以安装centos7.7的64位为例 一.下载系统镜像 镜像文件下载链接https://wiki.centos.org/Download 阿里云官网 ...

  6. Spring Security :CsrfFilter过滤器

    spring security框架提供的默认登录页面,会有一个name属性值为_csrf的隐藏域: 这是框架在用户访问登录页面之前就生成的,保存在内存中,当用户提交表单的时候会跟着一起提交: 然后会经 ...

  7. TinyXML2 使用

    TinyXML2 TinyXML2 TinyXML是一个开源的解析XML的解析库,能够用于C++,能够在Windows或Linux中编译,使用TinyXML进行C++ XML解析,使用简单,容易上手. ...

  8. nginx 安装第三方模块(lua)并热升级

    需求: nginx上将特定请求拒绝,并返回特定值. 解决办法: 使用lua脚本,实现效果. 操作步骤: 安装Luajit环境 重新编译nginx(目标机器上nginx -V 配置一致,并新增两个模块n ...

  9. python中os与sys作用与区别

    https://www.cnblogs.com/cloak/p/11237285.html OS模块 在自动化测试中,经常需要查找操作文件,比如说查找配置文件(从而读取配置文件的信息),查找测试报告( ...

  10. [转]【jsp】

    建立时间:6.30 &7.12& 7.24& 7.27 7月心比较浮躁,几乎没怎么学习编程 一.JSP技术 1.jsp脚本和注释 jsp脚本: 1)<%java代码%&g ...