element-ui 表单自定义日期输入校验

冷不防 2023-06-04 12:51 17阅读 0赞

methods: \{

validateDate(rule, value, callback){
         if (value) {       
           let timestamp = new Date(value).getTime()
           let start  = new Date(this.shiftStartTime).getTime()
           let end = new Date(this.shiftEndTime).getTime()
           if (end < timestamp || timestamp < start) {
             callback(new Error(`请在值班时间内选择  ${
        this.shiftStartTime} 至 ${
        this.shiftEndTime}`))
           } else {
             callback()
           }
         } else {
           callback()
         }
       }
    }

<el-form-item
              label="记录时间"
              prop="recordDateTime"
              :rules="[
                { required: true, message: '记录时间不能为空', trigger: 'blur'},
                { validator: validateDate, trigger: ['blur', 'change'] }
              ]"
            >
              <el-date-picker
                v-model="summaryForm.recordDateTime"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>

转载于:https://www.cnblogs.com/ckmouse/p/11497212.html

发表评论取消回复

表情：

评论列表（有 0 条评论，17人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用ElementUI对表单元素进行自定义校验

前言在使用ElementUI的表单元素时候，除了做一些简单的非空处理校验，在一些特殊的场合，还需要我们做一些自定义校验。其实ElementUI不仅提供了基本的非空校

蔚落/ 2023年09月24日 19:41/ 0 赞/ 74 阅读

相关 Iview 自定义表单校验

1、定义方法method下面 validateAge(rule, value, callback)\{ console.log(1); if (!value) \{

Bertha 。/ 2023年06月12日 08:39/ 0 赞/ 167 阅读

相关 element-ui 表单自定义日期输入校验

methods: \{ validateDate(rule, value, callback){ if (value) {

冷不防/ 2023年06月04日 12:51/ 0 赞/ 18 阅读

相关 layui自定义表单校验

layui表单元素的校验只需在元素上加入lay-verify，layui提供了以下值。 <table> <tbody> <tr> <td> <p>1</p>

向右看齐/ 2022年12月13日 04:48/ 0 赞/ 418 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 396 阅读

相关 elementui表单密码强度自定义验证

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

约定不等于承诺〃/ 2022年11月27日 08:54/ 0 赞/ 373 阅读

相关 vue element form 自定义校验1(表单校验)

通过`ref`属性获得表单对象,调用表单对象的`validate`函数进行表单的整体校验 <template> <!--model绑定整个form对象的的

逃离我推掉我的手/ 2022年10月30日 00:33/ 0 赞/ 34 阅读

相关 layui自定义表单校验

自定义一个金额的校验 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

雨点打透心脏的1/2处/ 2022年06月03日 01:58/ 0 赞/ 449 阅读

相关 vue 表单自定义校验方法

所用组件：Element UI 直接上代码 <el-form :model="editForm" :rules="editFormRules">

ゝ一世哀愁。/ 2022年05月13日 14:04/ 0 赞/ 434 阅读

相关 elementui 自定义表单验证邮箱、电话号码

1.html部分: <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125

拼搏现实的明天。/ 2022年03月11日 10:16/ 0 赞/ 1092 阅读