除了一些简单的表单验证之外,我们还会有一些稍微复杂点的多层级表单的验证,如下图所示可点击添加,删除对数组进行操作,当点击确定时需要验证每一条form-item不能为空



tempalte部分主要代码如下所示:

<el-form :model="form" ref="cardForm" :rules="rules" label-position="top" >
<el-form-item v-for="(item, index) in form.CARD_RIGHTS_LIST" :label="'卡权益' + (index+1)" :key="index" :prop="`CARD_RIGHTS_LIST.${index}.RIGHT_NAME`" :rules="{required: true, message: `请输入信用卡权益${index+1}`, trigger: ['change']}">
<el-col :span="20">
<el-input v-model=" item.RIGHT_NAME" :maxlength="20" placeholder="请输入信用卡权益" clearable show-word-limit></el-input>
</el-col>
<el-col :span="4" style="text-align: right;">
<el-button v-if="form.CARD_RIGHTS_LIST.length > 1" icon="el-icon-delete" type="danger" plain @click.prevent="handleRemoveValue(index)">删除</el-button>
</el-col>
</el-form-item>
<el-form-item v-if="form.CARD_RIGHTS_LIST.length < max" class="last">
<div class="et-tag__button--add" @click="handleAddValue"><img :src="tagAddIcon" width="16px" height="16px" alt="">添加(最多{{max}}条)</div>
</el-form-item>
</el-form>
<el-form-item class="product-form__footer last" label="">
<el-button class="et-button" type="primary" @click="submitForm(form)">确认</el-button>
</el-form-item>

data部分代码如下:

form:{
CARD_RIGHTS_LIST:[{ID:'',RIGHT_NAME:''}],
},

methods部分如下:

//添加form-item
handleAddValue() {
this.form.CARD_RIGHTS_LIST.push({ID:'',RIGHT_NAME:""})
},
//删除form-item
handleRemoveValue(index) {
this.form.CARD_RIGHTS_LIST.splice(index, 1)
},
//提交form并且验证
submitForm() {
this.$refs.cardForm.validate((valid) => {
if (valid) {
this.$message.info("操作成功");
//此处加入自己需求
} else {
//此处加入自己需求
}
} else {
this.$message.info("请完善信息");
return ;
}
});
},

以上仅展示此处对应的需求代码,可直接根据自己的需求进行修改即可实现此功能

el-form 中的数组表单验证(数组可动态添加删除)的更多相关文章

  1. HTML5 Web Form 新增属性和表单验证

    <form>标签的基本属性 method属性:指定浏览器向服务器传送数据的方式,可选: action属性:设置服务器接受和处理表单数据的URL: enctype属性:制定表单数据在发送到服 ...

  2. AngularJS中使用的表单验证

    Reference: http://www.tuicool.com/articles/2Qbiqi 客户端表单验证是AngularJS里面最酷的功能之一. AngularJS表单验证可以让你从一开始就 ...

  3. (转)AngularJS中使用的表单验证

    原文  http://www.cnblogs.com/woshinidezhu/p/Form-validation-with-AngularJS.html 客户端表单验证是AngularJS里面最酷的 ...

  4. 在AngularJS中实现自定义表单验证

    除了一些已经定义好了的验证(例如 必填项.最小长度.最大长度)之外,更常用的,还是需要我们自己定义表单验证,这样才能对于项目中遇到的很多非常规问题给出自己的合适的解决方案. 在表单中控制变量 表单的属 ...

  5. yii框架中应用jquery表单验证插件

    效果图: 视图层: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...

  6. (译) 在AngularJS中使用的表单验证功能【转】

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  7. (译) 在AngularJS中使用的表单验证功能

    验证功能是AngularJS里面最酷炫的功能之一,它可以让你写出一个具有良好用户体验的Web应用. 在AngularJS中,有许多用于验证的指令.我们将先学习几个最流行的内置指令,然后再创建一个自定义 ...

  8. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  9. javascript中常见的表单验证项

    1.不能超过20个字符 <body> <form name=a onsubmit="return test()"> <textarea name=&q ...

随机推荐

  1. A小程序与B小程序相互跳转的一点记录

    要点速览: A小程序和B小程序关联同一个公众号 B程序的用户授权 A小程序和B小程序的用户关联 诸葛 io 统计用户访问信息 需求:微信放开小程序互跳的 API 后,一些导流和拉新等活动可以在新的小程 ...

  2. React+dva+webpack+antd-mobile 实战分享(二)

    第一篇 https://segmentfault.com/a/11... 在上一篇文章中教给大家了怎么搭建项目的架子:那么今天我们就来说一下项目里的导航和列表的实现 导航 废话不说啦 下面直接给大家讲 ...

  3. 【Android开发】URL[] 转成 bitmap[]

    public static Bitmap[] getBitmapFromURL(String[] path) throws MalformedURLException { Bitmap[] b = n ...

  4. SQL语句总结---数据库操作

    https://blog.csdn.net/hallomrzhang/article/details/85010014 数据库操作 查看所有数据库 show databases; 1 查看当前使用的数 ...

  5. IO流的简单实现

    IO流的几种实现方式 学习目标: 例题: 字节输出流 字节输入流 字符输入流 字符输出流 学习目标: 熟练掌握IO流的基本实现方式 例题: 字节输出流 代码如下: public class Outpu ...

  6. Skipper & Tcl 笔记

    https://www.cnblogs.com/yeungchie/ ski-db 打开一个文件获取 lib 对象 dbImport set file "layout.gds" s ...

  7. yum install mysql-community-server yum方式安装mysql(社区版实操)

    前言:rpm方式或者这种yum安装时比较简单的方式,但是不推荐,但是确实很着急的话,可以采用这种安装这种方式不利于后续对mysql的管理,如果是多实例或者是复杂的一些架构的话,还是推荐利用源码包编译方 ...

  8. mysql发展历程 各分支版本溯源

    首先为什么要了解mysql的历史,了解一个软件的前生后世有时候还是很有必要,特别是对于走在架构之路或者是想深入了解一个软件的时候,在不同版本中由于进行了很多的改进或者说加入了新的功能,也有可能是软件本 ...

  9. docker中mysql导入sql文件

    1.先将文件导入到容器 docker cp **.sql [容器名]:/root/ 2.进入容器 docker exec -ti [容器名/ID]/bin/bash 3.将文件导入数据库 mysql ...

  10. 使用IDEA生产JavaDoc文档

    源代码 package com.*****.base; //文档注解 /** * @Author intelliyu * @version 1.0 //版本 * since 1.8 //指明需要最早使 ...