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 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
随机推荐
- Python 字符串多替换时性能基准测试
结论 先说结果, 直接替换是最好的. replace 一层层用, 方法笨了一点, 还可以. 时间消耗: tx2 < tx3 < tx1 < tx4 t2 < t3 < t ...
- 竟然有人在群里谈交钱培训PI。。。。等哥哥有时间,断了你们的财路
PI是工具,很不错的工具.统一管理接口,这点对大公司来说还是有必要的.而且PI的日志记录很详细,用的好的话,绝对物超所值.
- SQL Server 修改表结构(转载)
SQL Server 修改表结构 本文链接:https://blog.csdn.net/petezh/article/details/81744374 查看指定表结构 exec sp_help Rep ...
- 页面预加载loading动画,再载入内容
默认情况下如果网站请求速度慢,所以会有一段时间的空白页面等等,用户体验效果不好,见到很多的页面都有预加载的效果,加载之前先加载一个动画,后台进程继续加载页面内容,当页面内容加载完之后再退出动画显示内容 ...
- 搜狐视频 登录 md5 加密破解
这是一个简单的md5加密,可以学习一下js加密的破解流程,当一个入门级的教程 第一步:请求抓包 password是32位的字母和数字组合,猜测可能是md5加密,我们md5在线工具上试一下 发现我们的猜 ...
- postman常用功能汇总(基础必备)
下载安装 下载地址:https://www.getpostman.com/downloads/ 安装:略 接口测试详解 包含get,post(k-v,json,上传文件,cookie) 参考:http ...
- opencart 3 配置阿里邮箱smtp实测可用
最近ytkah在做一个客户的opencart项目时,配置阿里邮箱smtp一直收不到邮件,修改了很多配置文件也不起作用,今天再继续调试终于成功了,下面把所有步骤都记录下来,希望能帮到碰到同样问题的朋友们 ...
- 阿里云物联网平台: Android 连接阿里云物联网平台
说明 这节是是为下一节做铺垫的 只要是按照我提供的学习路线一节一节的认认真真学过来的,这节就十分的简单 有了前两节的基础,这节呢咱让Android 连接阿里云物联网平台 使用这节的代码 https: ...
- 【CSP-S膜你考】我们的可可西里
我们的可可西里 题面 转眼到了2008年的6月9日,盼望已久的高考结束了.我们踏上了向西的旅程(本来是想写西去之路,可是考虑不太妥当).可可西里,多么诱人的名词,充满了奇幻的色彩和自然的淳朴.从可可西 ...
- 第08组 Beta冲刺(3/5)
队名:955 组长博客:点这里! 作业博客:点这里! 组员情况 组员1(组长):庄锡荣 过去两天完成了哪些任务 文字/口头描述 ? 维持进度,检查需求 展示GitHub当日代码/文档签入记录 接下来的 ...