脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3 开始时间与结束时间

vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)

 更新时间：2024年07月15日 09:52:44   作者：SummerGao.  
本文通过示例代码介绍了vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的相关操作,代码简单易懂,感兴趣的朋友跟随小编一起看看吧

表单项

 <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable
                              v-model="form.startTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable
                              v-model="form.endTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

验证方法

 <el-row>
          <el-col :span="12">
            <el-form-item label="开始时间" prop="startTime">
              <el-date-picker clearable
                              v-model="form.startTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择开始时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="结束时间" prop="endTime">
              <el-date-picker clearable
                              v-model="form.endTime"
                              type="date"
                              value-format="YYYY-MM-DD"
                              placeholder="请选择结束时间">
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

在规则中使用

rules: {
    startTime: [
      { required: true, message: "开始时间不能为空", trigger: "blur" },
      {	
        //调用定义的方法校验格式是否正确
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
    endTime: [
      { required: true, message: "结束时间不能为空", trigger: "blur" },
      {	
        //调用定义的方法校验格式是否正确
        validator: isStartTimeAfterEndTime, trigger: "blur"
      }
    ],
  }

到此这篇关于vue3 开始时间与结束时间比较验证(结束时间需要大于开始时间)的文章就介绍到这了,更多相关vue3 开始时间与结束时间内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • vue.js Router嵌套路由

    vue.js Router嵌套路由

    这篇文章主要介绍vue.js Router嵌套路由,平时访问首页,里面有新闻类的/home/news,还有信息类的/home/message这时候就需要使用到嵌套路由,下面我们就来具体学习嵌套路由的原理,需要的朋友可以参考一下
    2021-10-10
  • vue3中defineComponent 的作用详解

    vue3中defineComponent 的作用详解

    这篇文章主要介绍了vue3中defineComponent 的作用,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
    2022-09-09
  • Vue中的变量赋值问题

    Vue中的变量赋值问题

    这篇文章主要介绍了Vue中的变量赋值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10
  • Vue中的虚拟dom分享

    Vue中的虚拟dom分享

    虚拟DOM是一种用JavaScript对象来描述真实DOM的技术,通过diff算法实现高效的DOM更新,提高页面性能,Vue通过render函数和VNode实现虚拟DOM,结合diff算法减少DOM操作,提升用户体验
    2024-12-12
  • Vue3中实现选取头像并裁剪

    Vue3中实现选取头像并裁剪

    这篇文章主要详细介绍了在vue3中如何选取头像并裁剪，文章中有详细的代码示例，需要的朋友可以参考阅读
    2023-04-04
  • vue引用外部JS并调用JS文件中的方法实例

    vue引用外部JS并调用JS文件中的方法实例

    我们在做vue项目时,经常会需要引入js,下面这篇文章主要给大家介绍了关于vue引用外部JS并调用JS文件中的方法的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-02-02
  • 教你如何优化 Vue.js 应用程序

    教你如何优化 Vue.js 应用程序

    Vue 3引入了Composition API，这是一套新的API用于编写组件，作为Options API的替代，这篇文章主要介绍了如何优化 Vue.js 应用程序,需要的朋友可以参考下
    2023-02-02
  • Vue调试工具vue-devtools的安装与使用

    Vue调试工具vue-devtools的安装与使用

    vue-devtools是专门调试vue项目的调试工具,安装成功之后,右边会出现一个vue,就可以在线可以调试vue了,下面这篇文章主要给大家介绍了关于Vue调试工具vue-devtools的安装与使用的相关资料,需要的朋友可以参考下
    2022-07-07
  • 详解Vue.js 作用域、slot用法（单个slot、具名slot）

    详解Vue.js 作用域、slot用法（单个slot、具名slot）

    这篇文章主要介绍了Vue.js 作用域、slot用法（单个slot、具名slot）,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
    2019-10-10
  • Vue动态绑定Class的几种常用方式

    Vue动态绑定Class的几种常用方式

    在vue框架开发中,有时候我们需要对元素的样式进行动态控制,比如tab按钮的切换,下面这篇文章主要给大家介绍了关于Vue动态绑定Class的几种常用方式,需要的朋友可以参考下
    2023-03-03

最新评论