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

发布于:2024-03-29 ⋅ 阅读:(15) ⋅ 点赞:(0)

当对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{
           /*验证未通过逻辑*/
          }
     });
本文含有隐藏内容,请 开通VIP 后查看