精华内容
下载资源
问答
  • 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:''},
                    ]
                },
        }
    }

    通过以上方法即可实现表单内数组数据的验证啦!!!

    测试有效!!!

    更多相关内容
  • 这样肯定需要为每个student的这些属性表单建立起关联关系,一种方式是根据属性表单的name上加特殊标记进行识别,但是数组传递表单就能使表单数据更结构化。 例子如下: <input type=hidden name=msginfo[name][]...
  • 需求是需要对下面循环产生的数组中行身份证和电话号码做校验规则 和单表单对象校验不同的是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("删除成功");
              });
          }
        },
    }
    
    展开全文
  • {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
    校验数组每一项: html部分: js部分:

    校验数组每一项:

    html部分:
    在这里插入图片描述

    js部分:
    在这里插入图片描述
    提交验证:
    在这里插入图片描述

    展开全文
  • Vue.js — ant-design数组表单验证

    千次阅读 2021-08-21 12:36:10
    常见的表单验证是对 对象 单个字段的验证,那如何对数组一项做到验证呢,效果如下: 二、实现 首先需要准备好 form 数据和 rules 验证规则 form: { member: [ { name: "", sex: "", age: "" } ], }, ...
  • Vue如何循环提取对象数组中

    千次阅读 2020-12-20 10:16:27
    1.数据如下,提取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.....
  • 一个后台系统, 管理员配置自定义字段后台生成id和title,其他角色使用自定义字段的表单, 添加数据, 但是每个要填写的对象的id 和title是无法固定的,因此页面显示的title 和id需要自定义数字和map对象来...
  • 表单的属性为数组时,该怎么校验数组元素的一项呢? 效果图: vue 代码 <template> <div style="width: 500px"> <el-form :model="ruleForm" :rules="rules" label-width="100px" ref=...
  • 我们完成的是公交车线路的修改,将某一路公交选出,所有的站点在form表单的text area 里面,直接在里面修改,提交,相应的改变数据库怎么实现?急求![图片说明]...
  • Vue array数组操作以及表单操作

    千次阅读 2019-07-13 19:59:42
    (1)key在没有删除插入操作时只要是唯一也无所谓,即此时index索引也可以 (2)如果有删除插入的操作,后一位会继承删掉的index,这时的key写不如不写,本来key是为了让遍历性能优化的操作,这种可能重复或者...
  • 本文实例讲述了PHP Web表单... 保存每个表单项的标记、提示文本、属性、选项、默认值等 将功能封装成函数,根据传递的参数生成指定的表单 数据的保存形式决定了程序实现的方式。 因此,根据上述开发要求,可以将每
  • 数组方式进行表单提交

    万次阅读 2017-04-18 15:37:39
     今天遇到一问题,保存很多表单信息,苦恼了许久,终于发现一挺不错的方法,以数组的形式把表单中的数据提交至后台进行保存。  其实实现起来很简单,就是给表单中要提交的信息的name命名时有一定的规范,...
  • js快速判断对象里的每个值是不是空

    千次阅读 2019-11-12 17:12:29
    我们在做前端开发的时候,会遇到有输入很多的查询条件,然后去后台查询数据,有时候对查询条件没有任何限制,但有的时候遇到特殊的情况,需要查询的条件不能空,至少输入一条件。有什么方法可以快速判断获取到...
  • e.detail.value 会取到表单中所有input的,据此得到input的 再对data进行赋值 实例: <form bindsubmit="submit"> <view wx:for="{{model}}" wx:key="{{index}}"> <input name="name{{...
  • js 合并两个数组weixin_357213204462018-09-17js把多个数组合并个数组jianqiangdexiaohai5702019-05-08js 两个数组(对象)去重合并weixin_4080507937632018-12-06js数组合并(一个数组添加到另一个数组里面)方法...
  • 此form表单每一项绑定的组成一对象,对象叠加组成了一对象数组,循环对象数组生成form的表单项。当点击新增一项时,其实就是form表单对象数组添加一对象,删除则反之。值得注意的是,由于动态表单得到的是...
  • 标题 项目开发vue + element-ui 对复杂对象型数组进行表单验证需求场景在最近的项目开发,里面有模块是关于采购系统的,采购避免不了做采购的台账信息表单,而采购的信息复杂且是动态添加的,所以也需要最复杂...
  • 在html表显示js数组

    千次阅读 2021-06-13 12:27:26
    I have a javascript array and I want to show parts of it in HTML.我有一javascript数组,我想用HTML显示它的一部分。For example what ...
  • 首先知道,使用validateField校验数组的时候的时候,数组有几位,就会回调几次。当回调返回都为“ ”,也就是空的时候,表示验证通过。当返回任何一空的时候,就是不通过,这空的回调内容就是我们校验...
  • 最近为了搞一自定义表单,并且该自定义表单设置一唯一的版本标识 例如:有那么一需求,例如我每次提交 字段所在的顺序是不一样的 // 例如:有 字段A:1, 字段B:2, 字段C:3 并且每次提交顺序 let arrA = [1,2...
  • 先上效果图: 说明: 横 和 纵 是遍历出来的...一、问题是这样的:后台传了xArr = [x1, x2,...,xn]和yArr = [y1, y2, ..yn]两个数组,前端渲染出表格并且可以填写每个单元格的,然后按照一定数据结构保存...
  • 后台数据的结构如下: "productfactors": [ {//产品投保要素 "factortype": "Period",//要素类型 "datatype": "08",//数据类型 "productfactorvalues": [ ... "factorvalue": "1Y",//投保要素计算 ...
  • 数据:对象数组中一项,items属性仍是一个数组。 data:[ { clientName:'中国移动', tenderAmount:'2', items:[ {projectName:'红旗镇中心城区海绵公园及周边配套设施改造工程',projectStatus:'招标'}, {...
  • 删除 如上代码: 1.rules写到v-for元素::rules="{ ...这样就可以实现,每个el-form-item可以实现对应的验证 注:如果需要动态新增,直接新增couponForm.actIdList就行:this.couponForm.actIdList.push("")
  • 为什么要用存储过程? 如果在应用程序经常需要执行特定的操作,可以基于这些操作简历一特定的过程.通过使用过程可以简化客户端程序的开发和维护,而且还能提高客户端程序的运行性能. 二.过程的优点? ... Hadoop版...
  • 数组转换字符串

    千次阅读 2019-03-01 17:24:33
    通过循环数组,在循环依次将每个元素取出,再把所有元素拼接成一个字符串 创建StringUtil的JavaBean类,将数组转换成字符串 public class StringUtil5 { private int intArr[]; //整形数组 private String str=...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 102,563
精华内容 41,025
关键字:

数组表单中为什么每个都要给值

友情链接: voip_intf.rar