对form表单对象中数组中的字段进行校验的方法

当对form表单中,数组readings中的字段进行校验时,prop和rules绑定要写成动态的,如下代码

 <div v-for="(item,index) in form.readings">
            <el-form-item label="上次读数"  > <!--prop="scds"-->
              <el-input
                v-model.trim="item.scds"
                placeholder="请输入上次读数"
                clearable
                size="small"
                :disabled=" !form.sccbjlId || index !=0"
                @input="upchang()"
              />
            </el-form-item>
            <el-form-item label="上次读数时间">
              <el-date-picker
                v-model.trim="item.scdssj"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                :disabled="!form.sccbjlId || index !=0"
                @change="checkTime(item.scdssj,item.readingTime,'scdsTime')"
                placeholder="选择日期">
              </el-date-picker> <!--:picker-options="scdssjOptions"-->
            </el-form-item>
            <span class="oprateBtn"  @click="addData" v-if="index===0">
                <em class="el-icon-plus"></em>
              </span>
            <span class="oprateBtn" @click="delData(item)" v-if="index !=0">
               <em class="el-icon-minus" ></em>
            </span>
            <el-form-item label="本次读数" class="jy" :prop="'readings.'+index+'.readings'":rules="bcdsRules.readings" >
              <el-input
                v-model.trim="item.readings"
                placeholder="请输入本次读数"
                clearable
                size="small"
              />
            </el-form-item>
            <el-form-item label="本次读数时间" :prop="'readings.'+index+'.readingTime'":rules="bcdsRules.readingTime">
              <el-date-picker
                v-model.trim="item.readingTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                @change="checkTime(item.scdssj,item.readingTime,'bcdsTime')"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>  <!--:picker-options="readingTimeOptions"-->
            <el-form-item label="单价(元/m³)" :prop="'readings.'+index+'.price'":rules="bcdsRules.price">
              <el-input
                v-model.trim="item.price"
                placeholder="请输入单价"
                clearable
                size="small"
              />
            </el-form-item>
          </div>

如下图所圈代码
在这里插入图片描述
2.校验规则

bcdsRules: {
          readings: [
            {required: true, message: '请输入本次读数!', trigger: 'blur'},
          ],
          readingTime: [
            {required: true, message: '请输入本次读数时间!', trigger: 'blur'},
          ],
          price: [
            {required: true, message: '请输入单价!', trigger: 'blur'},
          ],
        },

3.提交时的验证

this.$refs[form].validate((valid) => {
          if (valid) {
          /*验证通过逻辑*/
          }else{
           /*验证未通过逻辑*/
          }
     });

相关推荐

  1. element-plus校验

    2024-03-29 15:44:04       47 阅读
  2. elementUI 动态校验数据方法

    2024-03-29 15:44:04       46 阅读
  3. 二进制数据传输校验方法

    2024-03-29 15:44:04       54 阅读
  4. HTML5form防止重复提交两种方法

    2024-03-29 15:44:04       63 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-03-29 15:44:04       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-03-29 15:44:04       100 阅读
  3. 在Django里面运行非项目文件

    2024-03-29 15:44:04       82 阅读
  4. Python语言-面向对象

    2024-03-29 15:44:04       91 阅读

热门阅读

  1. 关于rockylinux9的网络配置

    2024-03-29 15:44:04       37 阅读
  2. 《享元模式(极简c++)》

    2024-03-29 15:44:04       45 阅读
  3. [ Linux ]调试工具gdb

    2024-03-29 15:44:04       42 阅读
  4. 【案例·查】判断SQL字段是否为空

    2024-03-29 15:44:04       36 阅读
  5. android pdf框架-10,相册浏览

    2024-03-29 15:44:04       41 阅读
  6. scala01

    2024-03-29 15:44:04       39 阅读
  7. 06 mybatis </sql>

    2024-03-29 15:44:04       29 阅读
  8. SQL注入 (一)

    2024-03-29 15:44:04       39 阅读