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


Posted in Javascript onOctober 10, 2019

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

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

 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 校验数组每一项实例代码

总结

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

Javascript 相关文章推荐
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
Mar 24 Javascript
超级退弹代码
Jul 07 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
AngularJs实现分页功能不带省略号的代码
May 30 Javascript
js简单正则验证汉字英文及下划线的方法
Nov 28 Javascript
重新理解JavaScript的六种继承方式
Mar 24 Javascript
react-router实现按需加载
May 09 Javascript
zepto.js 实时监听输入框的方法
Dec 04 Javascript
JQuery实现ajax请求的示例和注意事项
Dec 10 jQuery
JS中的模糊查询功能
Dec 08 Javascript
vue学习笔记之过滤器的基本使用方法实例分析
Feb 01 Javascript
使用Vue-cli3.0创建的项目 如何发布npm包
Oct 10 #Javascript
js判断复选框是否选中的方法示例【基于jQuery】
Oct 10 #jQuery
VUE注册全局组件和局部组件过程解析
Oct 10 #Javascript
jquery获取并修改触发事件的DOM元素示例【基于target 属性】
Oct 10 #jQuery
electron-vue开发环境内存泄漏问题汇总
Oct 10 #Javascript
Vue使用NProgress的操作过程解析
Oct 10 #Javascript
使用 Element UI Table 的 slot-scope方法
Oct 10 #Javascript
You might like
Fatal error: Call to undefined function curl_init()解决方法
2010/04/09 PHP
php strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
php shell超强免杀、减少体积工具实现代码
2012/10/16 PHP
php缓冲 output_buffering的使用详解
2013/06/13 PHP
使用PHP和JavaScript判断请求是否来自微信内浏览器
2015/08/18 PHP
ExtJS 2.0实用简明教程 之Ext类库简介
2009/04/29 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
Javascript写入txt和读取txt文件示例
2014/02/12 Javascript
Jquery修改页面标题title其它JS失效的解决方法
2014/10/31 Javascript
详解AngularJS中自定义指令的使用
2015/06/17 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
Javascript typeof与instanceof的区别
2016/10/18 Javascript
jQuery内存泄露解决办法
2016/12/13 Javascript
Angular.js实现注册系统的实例详解
2016/12/18 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
JS实现电话号码的字母组合算法示例
2019/02/26 Javascript
微信小程序云开发之新手环境配置
2019/05/16 Javascript
node.js 使用 net 模块模拟 websocket 握手进行数据传递操作示例
2020/02/11 Javascript
Django中login_required装饰器的深入介绍
2017/11/24 Python
利用PyCharm Profile分析异步爬虫效率详解
2019/05/08 Python
python GUI实现小球满屏乱跑效果
2019/05/09 Python
numpy和pandas中数组的合并、拉直和重塑实例
2019/06/28 Python
如何将 awk 脚本移植到 Python
2019/12/09 Python
python多进程重复加载的解决方式
2019/12/13 Python
详解CSS 3 中的 calc() 方法
2018/01/12 HTML / CSS
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
What's the difference between Debug and Trace class? (Debug类与Trace类有什么区别)
2013/09/10 面试题
商场拾金不昧表扬信
2014/01/13 职场文书
电气个人求职信范文
2014/02/04 职场文书
认识深刻的检讨书
2014/02/16 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
在职员工证明书
2014/09/19 职场文书
2014年计生协会工作总结
2014/11/21 职场文书
遗失说明具结保证书
2015/02/26 职场文书
2015年三好一满意工作总结
2015/07/24 职场文书