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

文章描述了在Vue表单中,如何根据数组动态绑定`prop`和`rules`以实现不同字段的校验,包括必填项和日期输入的示例代码以及提交验证的处理。
摘要由CSDN通过智能技术生成

当对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{
           /*验证未通过逻辑*/
          }
     });
  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值