element plus中form组件一个form-item对应多个框的解决方案

最新推荐文章于 2024-08-07 11:10:27 发布

神奇的小企鹅

最新推荐文章于 2024-08-07 11:10:27 发布

阅读量1.1k

点赞数

文章标签： vue.js 前端框架 elementui Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_57721277/article/details/129615379

版权

该文章展示了如何在Vue.js应用中实现表单验证，特别是针对日期和时间选择器的开始时间与结束时间的正确性。通过定义`checkStartTime`和`checkEndTime`校验方法，确保结束时间不早于开始时间，保证数据的有效性。

摘要由CSDN通过智能技术生成

实现如图问题，在一个form组件一个form-item对应多个框。以下是代码部分：

<el-form-item  :required="true">
    <el-form-item prop="date">
      <el-date-picker
        type="date"
        placeholder="请选择日期"
        :disabled-date="JobmMeetingState.forbiddenDate"
        v-model="JobmMeetingData.date"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item prop="startTimeVal">
      <el-select
        v-model="JobmMeetingData.startTimeVal"
        placeholder="开始时间"
        style="margin-left: 5px; flex: 1"
      >
        <el-option
          v-for="item in JobmMeetingState.timeOPtions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
    <span>-</span>
    <el-form-item prop="endTimeVal">
      <el-select
        v-model="JobmMeetingData.endTimeVal"
        placeholder="结束时间"
        style="flex: 1"
      >
        <el-option
          v-for="item in JobmMeetingState.timeOPtions"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
    </el-form-item>
</el-form-item>

对应的校验规则

const rules = {
  startTimeVal: [
    { required: true, message: "请选择开始时间", trigger: "blur" },
    { validator: checkStartTime, trigger: "change" },
  ],
  endTimeVal: [
    { required: true, message: "请选择结束时间", trigger: "blur" },
    {
      validator: checkEndTime,
      trigger: "change",
    },
  ],
};

 const checkEndTime = (rule: any, value: any, callback: any) => {
  if (value && JobmMeetingData.value.startTimeVal) {
    const start = new Date(`1970-01-01 ${JobmMeetingData.value.startTimeVal}`);
    const end = new Date(`1970-01-01 ${value}`);
    if (start > end) {
      callback(new Error("结束时间不能小于开始时间"));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

const checkStartTime = (rule: any, value: any, callback: any) => {
  if (value && JobmMeetingData.value.endTimeVal) {
    const start = new Date(`1970-01-01 ${value}`);
    const end = new Date(`1970-01-01 ${JobmMeetingData.value.endTimeVal}`);
    if (start > end) {
      callback(new Error("开始时间不能大于结束时间"));
    } else {
      callback();
    }
  } else {
    callback();
  }
};

我们需要在代码中定义校验规则和校验方法。在本例中，我们分别定义了两个校验方法checkStartTime和checkEndTime，用于验证开始时间和结束时间的正确性。这两个方法会在表单控件的值发生变化时进行调用。如果校验不通过，我们将通过callback方法返回一个错误信息。