elementui form-item中多个字段校验_el-form-item校验多个字段-CSDN博客

本文介绍如何在ElementUI中使用时间选择器，并针对两个时间字段进行有效校验，提供两种方法：一是通过套用el-form-item实现，二是推荐的单一字段校验方式，确保时间范围正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

preface

前两天太忙了，今天重新整理了下

需求

在这里插入图片描述

实现

方法一

再套一层 el-form-item 即可实现
外层的 * 号可以通过使用 elementUI 类名或者 slot=label 来实现
弊端，在数据校验的时候会有 bug

<!-- is-required 是直接使用了 elementui 中的 *， 也可以通过slot 自己添加 * -->
        <el-form-item class="is-required" label="固定时间段">
          <div class="add__coupon-pkg__duration-wrapper">
            <el-form-item prop="durationStart">
              <el-time-picker
                v-model="form.durationStart"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="开始时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </el-form-item>
            <div class="add__coupon-pkg__duration-dash">至</div>
            <el-form-item prop="durationEnd">
              <el-time-picker
                v-model="form.durationEnd"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="结束时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </el-form-item>
            <!--    <div class="add__coupon-pkg__duration">
           
            </div>-->
          </div>
        </el-form-item>

方法二（推荐）

只对 durationStart 字段进行校验
在 durationStart 校验规则中对 durationEnd 进行校验

<el-form-item label="固定时间段" prop="durationStart">
          <div class="add__coupon-pkg__duration-wrapper">
            <div class="add__coupon-pkg__duration">
              <el-time-picker
                v-model="form.durationStart"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="开始时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </div>
            <div class="add__coupon-pkg__duration-dash">至</div>
            <div class="add__coupon-pkg__duration">
              <el-time-picker
                v-model="form.durationEnd"
                range-separator="至"
                format="HH:mm"
                value-format="HH:mm"
                placeholder="结束时间"
                :picker-options="{format: 'HH:mm'}"
              ></el-time-picker>
            </div>
          </div>
        </el-form-item>

rules 中校验代码

  durationStart: [
          {
            required: true,
            validator: (rules, value, cb) => {
              let { durationEnd } = this.form;
              if (!value || !durationEnd) {
                return cb(new Error("固定时间段不能为空!"));
              }

              return cb();
            },
            trigger: "change"
          }
        ],