elementui form-item中多个字段校验

旧城等待， 2023-02-15 15:55 3阅读 0赞

## preface ##

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

## 需求 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]

## 实现 ##

### 方法一 ###

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

<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>
            </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"
              }
            ],

效果

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200606140217969.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200611094613158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3BhbG1lcl9rYWk=,size_16,color_FFFFFF,t_70