复杂表单如下:

<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. 搞Jedis案例出现问题,有大佬帮我看看怎么解决吗?先感谢大佬点进来看了---Day31

    今天学了Jedis的相关内容,然后做了一个案例,但是出现了错误,然后我百度了一晚上没有解决,想到看看发个博客能不能有大佬帮我看一下问题出现在哪里,百度了一晚上有点懵逼.求大佬帮我解决,在这小弟我先万分 ...

  2. 基于vue+springboot+docker网站搭建【六】安装中间件

    安装中间件 去另外一台2核4G的机器先安装docker,然后安装后台项目使用的中间件 一.mysql 下载镜像:docker pull mysql:5.7 启动镜像实例:docker run -p 3 ...

  3. Gin-Go学习笔记八:Gin-Web框架 常用的包

    常用的包 1>     在java,.net,php,node.js等语言常常会使用到包的概念.包的使用,可以加快项目的进度的开发,以及更好的实现项目的效果.我在网上查到了包的作用如下: 1.包 ...

  4. android studio学习----Failed to resolve: com.android.support:design:22.1.1

    这个目前好像没有合适的办法,唯一可行的就是 点击那个提示  进行SDK Manager下载就可以了 但是天朝的网啊,我试了很多次,突然的可以下载,运气啊 类似这一系列问题解决办法就是  重新更新SDK ...

  5. OKHttp和NumberProgressbar组建强大的Android版本更新功能

    你们看过韩国电影<奇怪的她>不?女主角是不是超级漂亮的.......好啦,扯正事吧,先看看女神照片. 公司新项目用到了OKHttp网络框架,在下载文件这块都蒙圈啦,再查查资料就一个Reso ...

  6. HTTP的发展历史和各个版本差别

    HTTP前世今生 1989年,蒂姆·伯纳斯-李发表论文确立了三项关键技术: URI: 统一资源标志符,作为互联网上资源的唯一身份 HTML: 超文本标记语言,描述超文本文档 HTTP: 超文本传输协议 ...

  7. Redis 分布式锁的正确打开方式

    前言 分布式锁一般有三种实现方式:1. 数据库乐观锁:2. 基于Redis的分布式锁:3. 基于ZooKeeper的分布式锁.本篇博客将介绍第二种方式,基于Redis实现分布式锁.虽然网上已经有各种介 ...

  8. PHP 多图上传,图片批量上传插件,webuploader.js,百度文件上传插件

    PHP  多图上传,图片批量上传插件,webuploader.js,百度文件上传插件(案例教程) WebUploader作用:http://fex.baidu.com/webuploader/gett ...

  9. windows 桌面文件变成.link解决方案

    在注册表中右键删除下面这个注册表项: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Explorer\FileExts\.ln ...

  10. Nginx 核心配置-自定义错误页面

    Nginx 核心配置-自定义错误页面 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 生产环境中错误页面一般都是UI或开发工程师提供的,他们已经在软件中定义好了,我们这里就简单写个h ...