-
2021-12-24 08:30:40
表单内有部分数据是通过数组循环展示出来的,需要对循环出来的表单进行验证,方式如下:
<div class="material-list" v-for="(item,index) in model.materialList" :key="index"> <el-form-item label="类型" :prop="`materialList.${index}.materialType`" :rules="{ required: true, message: '请选择类型',trigger: 'change'}"> <el-select v-model="item.materialType" placeholder="请选择类型" style="width:230px" @change="Change" :remote-method="remoteMethodmaterialType" filterable remote> <el-option v-for="(item,index) in materialTypeList" :key="index" :label="item" :value="item"> </el-option> </el-select> </el-form-item> </div>
解析:首先循环model里边的数组materialList,然后在el-form-item标签的prop验证中添加验证的字段为materialList数组下的字段名(通过index索引来获取)
数据格式,如下:
data(){ return{ model: { billId: '',picker: '',remark: '', materialList: [ {materialType: '',brand:'',material: '',unit:'',specificationModel:'',materialId: '',actualNumber:''}, ] }, } }
通过以上方法即可实现表单内数组数据的验证啦!!!
测试有效!!!
更多相关内容 -
form表单传递数组数据、php脚本接收的实例
2021-01-21 16:00:52这样肯定需要为每个student的这些属性表单建立起关联关系,一种方式是根据属性表单的name上加特殊标记进行识别,但是数组传递表单就能使表单数据更结构化。 例子如下: <input type=hidden name=msginfo[name][]... -
给循环数组里的每个对象做表单校验
2020-07-23 15:24:25需求是需要对下面循环产生的数组中的每行身份证和电话号码做校验规则 和单表单对象校验不同的是prop而已。单对象表单prop是写死的。当数组中的对象校验时,数组外层用el-form包裹,里面循环产生的对象prop要用动态...需求是需要对下面循环产生的数组中的每行身份证和电话号码做校验规则
和单表单对象校验不同的是prop而已。单对象表单prop是写死的。当数组中的对象校验时,数组外层用el-form包裹,里面循环产生的对象prop要用动态拼接的方式,如::prop="‘peersList.’ + index +’.idcard’"。
<el-form :model="ruleForm" ref="peerForm" class="peersList" > <el-row v-for="(row,index) in ruleForm.peersList" :key="index"> <el-col :span="1" align="center" style="margin-left: 10px;"> <span>{{index+1}}</span> </el-col> <el-col :span="4" style="margin-left: 10px;"> <el-form-item :prop="'peersList.' + index +'.name'"> <el-input v-model="row.name" placeholder="姓名"></el-input> </el-form-item> </el-col> <el-col :span="4" style="margin-left: 10px;text-align: center;"> <el-form-item :prop="'peersList.' + index +'.sex'"> <el-switch v-model="row.sex" active-text="女" inactive-text="男" ></el-switch> </el-form-item> </el-col> <el-col :span="6" style="margin-left: 10px;"> <el-form-item :prop="'peersList.' + index +'.idcard'" :rules="morePeerRules.checkIdCode"> <el-input data-id-card="idCard" type="number" v-model="row.idcard" placeholder="身份证号" maxlength="18" show-word-limit ></el-input> </el-form-item> </el-col> <el-col :span="5" style="margin-left: 10px;"> <el-form-item :prop="'peersList.' + index +'.phone'" :rules="morePeerRules.checkPhone"> <el-input data-phone="phone" type="number" v-model="row.phone" placeholder="手机" maxlength="11" show-word-limit ></el-input> </el-form-item> </el-col> <el-col :span="2" align="center"> <a class="el-link el-link--default"> <i @click="addRowPeers" class="el-icon-circle-plus-outline" :style="clickBtn=='view'?'pointer-events:none;font-size:20px':'font-size:20px'"></i> </a> <a class="el-link el-link--default" style="margin-left: 8px;"> <i @click="delectRowPeers(row,index)" class="el-icon-remove-outline" :style="clickBtn=='view'?'pointer-events:none;font-size:20px':'font-size:20px'"></i> </a> </el-col> </el-row> </el-form> import { rule } from "@/util/rule"; data() { return { ruleForm: { peersList: [ { name: "", sex: false, idcard: "", phone: "" } ] } }, morePeerRules: { checkIdCode: [ { validator: rule.idCard, required: true, trigger: "blur" } ], checkPhone: [ { validator: rule.phoneNumber, required: true, trigger: "blur" } ] }, }, methods:{ //添加同行人 addRowPeers() { this.ruleForm.peersList.push({ name: "", sex: false, idcard: "", phone: "" }); }, //删除同行人 delectRowPeers(row, index) { if (this.ruleForm.peersList.length == 1) { this.$message.warning("不允许删除最后一条"); } else { this.$confirm("是否确认删除?", { confirmButtonText: "确定", cancelButtonText: "取消", type: "warning" }) .then(() => { this.ruleForm.peersList.splice(index, 1); }) .then(data => { this.$message.success("删除成功"); }); } }, }
-
获得html表单中radio name相同的数组的值 并判断每个选项不能为空
2017-10-09 14:58:11{foreach from="$info" item="fee"} {$fee.id}、{$fee.question} A:{$fee.a_choice} B:{$fee.b_choice} C:{$fee.c_choice} D:{$fee.d_choice}<form method="post" action="" οnsubmit="return aa()"> {foreach from="$info" item="fee"} <!--问题:-->{$fee.id}、{$fee.question}<br> <label class="ui-radiobox" rel="common_user_type"> <input type="radio" name="score{$fee.id}" value="{$fee.a_score}" > A:{$fee.a_choice} </label> <label class="ui-radiobox" rel="common_user_type"> <input type="radio" name="score{$fee.id}" value="{$fee.b_score}"> B:{$fee.b_choice} </label> <label class="ui-radiobox" rel="common_user_type"> <input type="radio" name="score{$fee.id}" value="{$fee.c_score}"> C:{$fee.c_choice} </label> <label class="ui-radiobox" rel="common_user_type"> <input type="radio" name="score{$fee.id}" value="{$fee.d_score}"> D:{$fee.d_choice} </label> <br> {/foreach} <input type="submit"> </form>
jq代码
<script type="text/javascript"> function aa(){ var err_msg=''; var arr_name=[]; $("input:radio[name^=score]").each(function(){ if (!arr_name[this.name]){ arr_name[this.name]=1; } }); for (name in arr_name) { //alert(name); //score8 score9 score7 score6 //console.log($("input:radio[name="+name+"]").val()); if ($("input:radio[name="+name+"]:checked").length==0) { var names = name.substr(5); //alert(names); err_msg+="第"+names+"题还没选择答案\r\n"; } if (err_msg!="") { alert(err_msg); return false; } } </script>
-
vue+element 表单内数组每一项校验
2020-07-21 18:15:28 -
Vue.js — ant-design数组表单验证
2021-08-21 12:36:10常见的表单验证是对 对象中 单个字段的验证,那如何对数组中的每一项做到验证呢,效果如下: 二、实现 首先需要准备好 form 数据和 rules 验证规则 form: { member: [ { name: "", sex: "", age: "" } ], }, ... -
Vue如何循环提取对象数组中的值
2020-12-20 10:16:271.数据如下,提取name和callcount 2代码. getQueryCallStatistics("sesp1", this.provinceId).then((res... 本文标题: Vue如何循环提取对象数组中的值 本文地址: http://www.cppcns.com/wangluo/javascript/365017.html -
表单的提交 “数组的整合”
2018-12-18 16:20:51前段时间工作中遇到的问题:后端要求使用form表单提交到后台的数据为一组整合的数据,接下来看如何将form表单的数据以数组的方式提交到后台: 1、普通方式:给每个form表单可检测的标签命名不同的name即可: &... -
JS判断数组对象中所有属性是否为空
2020-04-28 16:10:26我们平时提交表单的时候 需要用户填写所有信息 judgeObjectComplete(ObjectValue) { let flag = new Boolean() flag = true for (let key in ObjectValue) { if (ObjectValue[key]) {} else { flag = fals..... -
element vue Array数组和Map对象的添加与删除操作
2020-12-12 23:31:26一个后台系统中, 管理员要配置自定义字段后台要生成id和title,其他角色要使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title都是无法固定的,因此页面显示的title 和id都需要自定义数字和map对象来... -
el-form 校验数组的每个元素
2022-01-12 17:52:00当表单的属性为数组时,该怎么校验数组元素的每一项呢? 效果图: vue 代码 <template> <div style="width: 500px"> <el-form :model="ruleForm" :rules="rules" label-width="100px" ref=... -
如何将数组里面的值一次性查入mysql ,且每数组的每一个值都是一条记录
2015-07-01 06:51:43我们要完成的是公交车线路的修改,将某一路公交选出,所有的站点都在form表单的text area 里面,直接在里面修改,提交,相应的改变数据库怎么实现?急求![图片说明]... -
Vue array数组操作以及表单操作
2019-07-13 19:59:42(1)key值在没有删除插入操作时只要是唯一值也无所谓,即此时为index索引也可以 (2)如果有删除插入的操作,后一位会继承删掉的index,这时的key写不如不写,本来key是为了让遍历性能优化的操作,这种可能重复或者... -
PHP Web表单生成器案例分析
2021-01-19 23:56:56本文实例讲述了PHP Web表单... 保存每个表单项的标记、提示文本、属性、选项值、默认值等 将功能封装成函数,根据传递的参数生成指定的表单 数据的保存形式决定了程序实现的方式。 因此,根据上述开发要求,可以将每 -
数组方式进行表单提交
2017-04-18 15:37:39今天遇到一个问题,要保存很多表单信息,苦恼了许久,终于发现一个挺不错的方法,以数组的形式把表单中的数据提交至后台进行保存。 其实实现起来很简单,就是给表单中要提交的信息的name命名时要有一定的规范,... -
js快速判断对象里的每个值是不是空
2019-11-12 17:12:29我们在做前端开发的时候,会遇到有输入很多的查询条件,然后去后台查询数据,有时候对查询条件没有任何限制,但有的时候遇到特殊的情况,需要查询的条件不能为空,至少要输入一个条件。有什么方法可以快速判断获取到... -
小程序表单中 多个循环input 如何取每个input的值
2020-05-24 22:58:42e.detail.value 会取到表单中所有input的值,据此得到每一个input的值 再对data进行赋值 实例: <form bindsubmit="submit"> <view wx:for="{{model}}" wx:key="{{index}}"> <input name="name{{... -
js把两个json数组根据相同键值合并成一个数组
2020-12-19 12:53:47js 合并两个数组weixin_357213204462018-09-17js把多个数组合并为一个数组jianqiangdexiaohai5702019-05-08js 两个数组(对象)去重合并weixin_4080507937632018-12-06js数组合并(一个数组添加到另一个数组里面)方法... -
vue-form-component:一个可以动态生成表单项的form表单组件
2021-05-11 12:17:07此form表单每一项绑定的值组成一个对象,对象叠加组成了一个对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是给form表单对象数组添加一个对象,删除则反之。值得注意的是,由于动态表单得到的是... -
vue + element-ui 对复杂对象型数组进行表单验证
2020-12-20 01:20:47标题 项目开发中vue + element-ui 对复杂对象型数组进行表单验证需求场景在最近的项目开发中,里面有个模块是关于采购系统的,采购避免不了做采购的台账信息表单,而采购的信息复杂且是动态添加的,所以也需要最复杂... -
在html表中显示js数组
2021-06-13 12:27:26I have a javascript array and I want to show parts of it in HTML.我有一个javascript数组,我想用HTML显示它的一部分。For example what ... -
记录:elementUI中validateField对部分表单字段进行校验数组时多次回调问题
2020-12-23 16:36:34首先要知道,使用validateField校验数组的时候的时候,数组有几位,就会回调几次。当回调返回都为“ ”,也就是空的时候,表示验证通过。当返回任何一个不为空的时候,就是不通过,这个不为空的回调内容就是我们校验... -
生成数组唯一标识,数组任意更改顺序和字段,适合表单版本标识生成
2019-11-14 11:36:45最近为了搞一个自定义表单,并且为该自定义表单设置一个唯一的版本标识 例如:有那么一个需求,例如我每次提交 字段所在的顺序是不一样的 // 例如:有 字段A:1, 字段B:2, 字段C:3 并且每次提交顺序 let arrA = [1,2... -
vue 做后台管理系统2维数组表单(动态渲染可编辑单元格的Table)
2019-03-28 12:40:52先上效果图: 说明: 横 和 纵 都是遍历出来的...一、问题是这样的:后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组,前端要渲染出表格并且可以填写每个单元格的值,然后按照一定数据结构保存... -
uni-app中picker下拉列表中遍历双层数组
2019-07-26 15:38:21后台数据的结构如下: "productfactors": [ {//产品投保要素 "factortype": "Period",//要素类型 "datatype": "08",//数据类型 "productfactorvalues": [ ... "factorvalue": "1Y",//投保要素值计算值 ... -
vue实战——对象数组嵌套数组循环展示为表格
2019-05-08 10:55:20数据:对象数组中的每一项,items属性仍是一个数组。 data:[ { clientName:'中国移动', tenderAmount:'2', items:[ {projectName:'红旗镇中心城区海绵公园及周边配套设施改造工程',projectStatus:'招标'}, {... -
工作笔记:elementUI实现数组(需要验证的数据是以数组的形式呈现)表单验证
2020-08-13 16:35:35删除 如上代码: 1.rules写到v-for元素中::rules="{ ...这样就可以实现,每个el-form-item都可以实现对应的验证 注:如果需要动态新增,直接新增couponForm.actIdList值就行:this.couponForm.actIdList.push("") -
mysql存储过程中遍历数组字符串的两种方式
2021-04-25 11:33:09为什么要用存储过程? 如果在应用程序中经常需要执行特定的操作,可以基于这些操作简历一个特定的过程.通过使用过程可以简化客户端程序的开发和维护,而且还能提高客户端程序的运行性能. 二.过程的优点? ... Hadoop版... -
数组转换为字符串
2019-03-01 17:24:33通过循环数组,在循环中依次将每个元素取出,再把所有元素拼接成一个字符串 创建StringUtil的JavaBean类,将数组转换成字符串 public class StringUtil5 { private int intArr[]; //整形数组 private String str=...