导读

这是element组件库系列文章，主要是平时使用element组件库的一些过程和心得，文章篇幅不定，有长有短，但主打一个实用（可能实用不一定是对你实用，不实用请轻喷）。废话少说，本篇将讲述element-plus中如何在表单（el-form）中对时间范围字段(分为开始时间和终止时间)进行校验的。

package	version
element-plus	2.2.15
Vue3	3.3.4

正文

step1: 准备工作

搭建一个简易项目，引入element-plus。

数据和表单代码为

vue 复制代码

    <script lang="ts" setup>
    const data = ref({
      name:'',
      age:'',
      cardType:'',
      cardId:"",
      cardStartTime:"",
      cardEndTime:""
    })
    </script>
    <template>
    <el-form ref="formRef" :model="data">
        <el-form-item label="姓名：" prop="name">
          <el-input v-model="data.name"></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input :min="0" type="number" v-model="data.age"></el-input>
        </el-form-item>
        <el-form-item label="证件有效期范围" :prop="['cardStartTime','cardEndTime']" :rules="[{
         validator:cardTimeValidator
        }]">
          <el-row>
            <el-col :span="11">
              <el-date-picker v-model="data.cardStartTime" type="date" clearable value-format="YYYY-MM-DD" :disabled-date="startDisabled"></el-date-picker>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="data.cardEndTime" type="date" clearable value-format="YYYY-MM-DD" :disabled-date="endDisabled"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
        <el-button type="primary" @click="handleValidate">验证表单</el-button>
      </el-form>
    </template>

step2 字段校验

由于，有效期范围通常是分为起始时间和终止时间。校验时，可能有以下情况：

起始时间和终止时间未填
起始时间未填，终止时间已填
起始时间已填，终止时间未填
起始时间晚于终止时间（或终止时间早于起始时间）
起始时间早于终止时间

很明显，最后一种情况才是对的。

为此，我使用自定义校验规则来实现这一功能。

vue 复制代码

    <script>
    function cardTimeValidator(rule,value,callback){
      if(!data.value.cardStartTime && !data.value.cardEndTime){
        callback('证件有效期不能为空')
      }
     if(!data.value.cardStartTime){
       callback(new Error('证件起始有效期不能为空'))
     }
      else if(!data.value.cardEndTime){
       callback(new Error('证件终止有效期不能为空'))
     } else{
        const stime = DayJS(data.value.cardStartTime);
        const etime =DayJS(data.value.cardEndTime);
        if(stime.isAfter(etime)){
          callback('起始时间不能晚于终止时间')
        } else if(etime.isBefore(stime)){
          callback('终止时间不能早于起始时间')
        } else{
          callback()
        }
     }
    }
    </script>
    <template>
    ...
    <el-form-item label="证件有效期范围" :prop="['cardStartTime','cardEndTime']" :rules="[{
         validator:cardTimeValidator
        }]">
          <el-row>
            <el-col :span="11">
              <el-date-picker v-model="data.cardStartTime" type="date" clearable value-format="YYYY-MM-DD" :disabled-date="startDisabled"></el-date-picker>
            </el-col>
            <el-col :span="2">-</el-col>
            <el-col :span="11">
              <el-date-picker v-model="data.cardEndTime" type="date" clearable value-format="YYYY-MM-DD" :disabled-date="endDisabled"></el-date-picker>
            </el-col>
          </el-row>
        </el-form-item>
    ...
    </template>

首先，在校验函数validator中，先判断起始时间和终止时间是否为空，再借助dayjs的isBefore()和isAfter()方法来比较日期，实现相应的判断逻辑。

除此之外，如果我们使用el-date-picker组件选择日期时，我们可以通过其disabled-date属性指定一个函数用于控制日期的可选状态

逻辑就是起始时间（终止时间）选中后，终止时间（起始时间）不能早于（晚于）起始时间（终止时间），否则就返回true表示禁用，这样，可以从数据输入阶段就杜绝起始时间晚于终止时间此类情况的出现。

总结

以上就是element-plus表单中时间范围字段如何校验的内容了，其它的范围字段的校验也同理，通过自定义的validator函数来解决，让我们下篇再见！

element组件库系列（三）-- element-plus表单范围字段的校验

导读

正文

step1: 准备工作

step2 字段校验

总结