element form 校验数组每一项实例代码

1.校验的数据结构如下:

2.html结构

<el-dialog
        :title="title"
        :visible.sync="visable"
        width="40%"
        :before-close="cancel">
      <el-form label-width="80px" :model="formData" :rules="formDataRules" ref="formData" >
        <el-form-item label="Id" prop="id" v-if="formData.id">
          {{formData.id}}
        </el-form-item>

        // begin ---------------------
        <div v-for="(item, index) in formData.test" :key="index">
          <el-form-item label="test1" :prop="`test[${index}].test1`" :rules="{ required: true, message: '请输入test1', trigger: 'blur' }">
            <el-input type="text" v-model="item.test1"></el-input>
          </el-form-item>
          <el-form-item label="test2" :prop="`test[${index}].test2`" :rules="{ required: true, message: '请输入test2', trigger: 'blur' }">
            <el-input type="text" v-model="item.test2"></el-input>
          </el-form-item>
        </div>
　　　　　　　　　// end ---------------------

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="save('formData')">确 定</el-button>
      </div>
    </el-dialog>

3.提交

save(formName: string) {
      const el: any = this.$refs[formName] ;
      el.validate((valid: any) => {
        if (valid) {
          // todo 校验成功
        } else {
          return false;
        }
      });
    }

4.效果

总结

以上所述是小编给大家介绍的element form 校验数组每一项实例代码,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • vue elementui form表单验证的实现

    vue elementui form表单验证的实现

    最近我们公司将前端框架由easyui 改为 vue+elementui .自学vue两周 就开始了爬坑之路.业余时间给大家分享一下心得,技术新手加上第一次分享(小激动),有什么不足的地方欢迎大家指正,多多交流才能共同进步! 1.问题 我们公司的项目比较大 表格 表单的页面都不胜数 ,基于此封装了一些 可复用的代码. 2.分析  vue给了我们不一样的前端代码体验  element ui 给我们一套功能强大的组件 减少了我们大量的开发时间 .双剑合璧 天下无敌!  但每个公司的代码风格不同  用户

  • 表单元素事件 (Form Element Events)

    属性 值 描述 onchange 脚本 当元素改变时执行脚本 onsubmit 脚本 当表单被提交时执行脚本 onreset 脚本 当表单被重置时执行脚本 onselect 脚本 当元素被选取时执行脚本 onblur 脚本 当元素失去焦点时执行脚本 onfocus 脚本 当元素获得焦点时执行脚本 w3c的标准是这么描述的. 可是发现IE可以执行(不过如果你在遨游下测试onfocus的话千万别用alert(),会无限弹出.),其他浏览器都不可以实现.IE向来是个不听话的主,都是搞私有主义的....

  • JavaScript中document.forms[0]与getElementByName区别

    首先我们来看个示例: 复制代码 代码如下: <form name="buyerForm" method="post" action="/mysport/control/user/list.do"> <input type="checkbox" id="usernames" value="testtest" >testtest<br> <input

  • 浅谈XML Schema中的elementFormDefault属性

    elementFormDefault属性与命名空间相关,其值可设置为qualified或unqualified 如果设置为qualified: 在XML文档中使用局部元素时,必须使用限定短名作为前缀 sean.xsd: <?xml version="1.0" encoding="UTF-8"?> <xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:sean=&

  • vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    vue+element-ui集成随机验证码+用户名+密码的form表单验证功能

    在登入页面,我们往往需要通过输入验证码才能进行登入,那我们下面就详讲一下在vue项目中如何配合element-ui实现这个功能 第一步:自定义一个生产随机验证码的组件,其本质是使用canvas绘制,详细代码如下: <template> <div class="s-canvas"> <canvas id="s-canvas" :width="contentWidth" :height="contentHeig

  • vue elementUI 表单校验功能之数组多层嵌套

    在使用vue element-ui form表单渲染的时候,会遇到这样的数据结构: { "title":''123455, "email":'123456@qq.com', "list": [ { "id": "quis consequat culpa ut pariatur", "name": "et quis irure dolore ullamco", &quo

  • js Form.elements[i]的使用实例

    复制代码 代码如下: //检查表单元素是否为空 function check(Form) { for (i=0;i<Form.length;i++){ if(Form.elements[i].value == "") { //Form的属性elements的首字e要小写 alert(Form.elements[i].name + "不能为空!"); Form.elements[i].focus(); //指定表单元素获得焦点 return; } } Form.

  • Vue ElementUI之Form表单验证遇到的问题

    Vue ElementUI之Form表单验证遇到的问题

    首先说一下 我在form表单里面遇见的坑: 1.例如我要给后台传的不是对象,而是一个数组,怎么写验证? 2.比如我有四个弹出框,都要做验证,这个时候就要注意了,每一个弹出框的ref都不能给的一样,并且一定要与当前弹框的确定或者保存按钮一一对应,例如:第一个弹框的ref='number',按钮的click比如为xxxxxx('number'),第二个弹出框的ref='number2',对应的按钮>>xxxxxx('number2').如果ref用的都一样,就会出现,点击下一步我没有去做验证,我再

  • JS.getTextContent(element,preformatted)使用介绍

    复制代码 代码如下: /*获取标签的文字*/ function getTextContent(element, preformatted) { if (!elementIsVisible(element)) return ''; if (element.nodeType == 3 /*Node.TEXT_NODE*/) { var text = element.data; if (!preformatted) { //text = text.replace(/\n|\r|\t/g, " &quo

  • element form 校验数组每一项实例代码

    1.校验的数据结构如下: 2.html结构 <el-dialog :title="title" :visible.sync="visable" width="40%" :before-close="cancel"> <el-form label-width="80px" :model="formData" :rules="formDataRules"

  • iOS对数组进行排序的实例代码

    一,代码. - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. //直接排序对象 NSSortDescriptor *descriptor = [NSSortDescriptor sortDescriptorWithKey:nil ascending:YES]; NSArray *descriptors = [NSAr

  • C#byte数组与Image的相互转换实例代码

    C#byte数组与Image的相互转换实例代码 功能需求: 1.把一张图片(png bmp jpeg bmp gif)转换为byte数组存放到数据库. 2.把从数据库读取的byte数组转换为Image对象,赋值给相应的控件显示. 3.从图片byte数组得到对应图片的格式,生成一张图片保存到磁盘上. 这里的Image是System.Drawing.Image. //Get an image from file Image image = Image.FromFile("D:\\test.jpg&q

  • PHP 数组黑名单/白名单实例代码详解

    php里经常通过join查询得到的数据, 会有这种情况: $data = [ {id=>1,name=>a,age=>a}, {id=>1,name=>b,age=>b}, {id=>2,name=>c,age=>c}, {id=>3,name=>f,age=>f}, {id=>2,name=>d,age=>d}, ]; 这种格式的数据其实很常见, 实际上我们想要的数据效果是: $data = [ [id=>1

  • vue更改数组中的值实例代码详解

    根据下标更改时 vm为新建的vue对象 ind为数组 第一个e为在数组ind中e索引位置 第二个e为更改为值e vm.$set(vm.ind,e,e) 常规更改 arr为数组 //添加 arr.push(1); //删除 arr.splice(*,*); //替换 arr.splice(*,*,*); splice方法 实例 例子 1 在本例中,我们将创建一个新数组,并向其添加一个元素: <script type="text/javascript"> var arr = n

  • php下将多个数组合并成一个数组的方法与实例代码

    1.合并数组 array_merge()函数将数组合并到一起,返回一个联合的数组.所得到的数组以第一个输入数组参数开始,按后面数组参数出现的顺序依次迫加.其形式为: 复制代码 代码如下: array array_merge (array array1 array2-,arrayN) 将一个或多个数组的单元合并起来,一个数组中的值附加在前一个数组的后面.返回作为结果的数组. 如果输入的数组中有相同的字符串键名,则该键名后面的值将覆盖前一个值.然而,如果数组包含数字键名,后面的值将不会覆盖原来的值,

  • Shell 数组与关联数组详解及实例代码

    Shell 数组与关联数组 1.数组 1.1. 数组定义 一对圆括号表示数组,数组元素之间用空格符号分割 xiaosi@Qunar:~$ a=(1 2 3) xiaosi@Qunar:~$ echo $a 1 xiaosi@Qunar:~$ a=("yoona" "lucy" "tom") xiaosi@Qunar:~$ echo $a yoona 1.2. 数组长度,元素,赋值与删除 长度:用${#数组名[@或*]} 可以得到数组长度 xiao

  • vue + element ui实现播放器功能的实例代码

    vue + element ui实现播放器功能的实例代码

    没有效果图的展示都是空口无凭 1.基于audio并结合elementUI 的进度条实现 2.实现了播放器基本的功能,播放/暂停.快进.静音.调节声音大小.下载等功能 html代码,关键部分已加注释 <div class="right di main-wrap" v-loading="audio.waiting"> <!-- 此处的ref属性,可以很方便的在vue组件中通过 this.$refs.audio获取该dom元素 --> <au

  • js每隔两秒输出数组中的一项(实例)

    实例如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery/2.0.0/jquery.min.js"></script> </head> <body> <div i

  • 使用Vue动态生成form表单的实例代码

    具有数据收集.校验和提交功能的表单生成器,包含复选框.单选框.输入框.下拉选择框等元素以及,省市区三级联动,时间选择,日期选择,颜色选择,文件/图片上传功能,支持事件扩展. 欢迎大家star学习交流:github地址 示例 https://raw.githubusercontent.com/xaboy/form-create/dev/images/sample110.jpg 安装 npm install form-create OR git clone https://github.com/xa

随机推荐