FineReport日期控件JS校验

星明酱_5630

星明酱_5630

2026-06-24

921人浏览

原创

在内置参数查询界面中,系统支持对输入数据进行有效性验证。例如,针对“开始日期”和“结束日期”两个关键参数,需确保两者均非空值,且结束日期必须严格大于开始日期;此外,还需限定结束日期不得超出开始日期指定天数(如15天)的范围,否则将触发错误提示。该校验逻辑可通过为查询按钮绑定javascript事件来实现。以下以finereport电子表格工具为例,详细说明具体配置流程与操作要点。

1、 实际运行效果如下所示:

2、 具体报错提示参见下图所示效果。

FineReport日期控件JS校验

3、 启动模板编辑环境

4、 定位并打开位于 %FR_HOME%\WebReport\WEB-INF\reportlets\doc\Parameter\TimeScale 目录下的 TimeScale.cpt 模板文件。

5、 参数配置面板界面如下图所示:

FineReport日期控件JS校验

6、 添加交互事件

7、 为查询按钮配置点击事件,对应JavaScript脚本如下:

8、 若起始时间字段为空或未设置有效值,则执行相应校验分支。

9、 “开始时间不能为空,请输入合法日期后重试。”

10、 };

11、 若终止时间字段为空或未填写,则进入对应处理逻辑。

12、 “结束时间不能为空,请完善信息后再提交。”

13、 };

14、 对比起止时间,判断是否出现起始时间晚于截止时间的情况。

15、 “开始时间不可晚于结束时间,请核对后重新输入。”

16、 }

17、 将起始日期字符串解析为标准Date对象,便于后续时间运算与比较。

18、 将截止日期字符串转换为Date类型对象,以支持精确的时间差计算。

19、 计算结束日期与开始日期之间的毫秒级差值,并将其换算为自然日数:差值 ÷ (1000 × 60 × 60 × 24)。

Revealjs Presentations
Revealjs Presentations

创建、编辑并部署 reveal.js 演示文稿为单个 HTML 文件,可选自定义 CSS。适用于需要制作演示文稿、幻灯片或宣传材料时使用。

下载

20、 若二者间隔超过15个自然日,则触发限制逻辑。

21、 “结束日期不得超过开始日期15天,请调整日期范围后重试。”

22、 }

23、 虽然参数控件本身具备基础校验能力,但其仅在用户主动点击控件时才生效,因此建议将所有必填项检查及跨字段逻辑校验统一集中在查询按钮的点击事件中完成。

24、 预览最终效果

25、 在界面上选择任意起止时间区间,若跨度超过15天,系统将自动弹出提示框,并阻止分页预览模板的加载。

26、 上述JavaScript代码已在Firefox、Chrome以及IE9及以上版本浏览器中完成兼容性测试,运行稳定;但在IE8及更低版本中存在日期差值提示异常的问题,需替换为兼容性更强的写法以保障功能完整性。

27、 若起始时间字段为空或未初始化,则启动对应容错机制。

28、 “开始时间不能为空,请输入有效日期后重试。”

29、 };

30、 若截止时间字段为空或未填写,则进入对应校验路径。

31、 “结束时间不能为空,请完整填写后再提交。”

32、 };

33、 核查起始时间是否大于截止时间。

34、 “开始时间不可晚于结束时间,请检查后重新输入。”

35、 }

36、 将原始日期字符串按“月-日-年”格式重构,通过新建Date对象并传入标准化的年、月、日参数,确保日期能被正确识别与渲染(MM-dd-yyyy格式)。

37、 将起止时间的时间戳差值由毫秒单位转换为天数单位,计算方式为:(endTime - startTime) / 1000 / 60 / 60 / 24。

38、 若截止时间超出起始时间15天以上,则执行拦截操作。

39、 “结束日期不能超过开始日期15天,请重新选择合理的时间范围。”

40、 }

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

javascript js

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
js正则表达式
js正则表达式

php中文网为大家提供各种js正则表达式语法大全以及各种js正则表达式使用的方法,还有更多js正则表达式的相关文章、相关下载、相关课程,供大家免费下载体验。

2023.06.20

3716

8

js获取当前时间
js获取当前时间

JS全称JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言;它是一种属于网络的高级脚本语言,主要用于Web,常用来为网页添加各式各样的动态功能。js怎么获取当前时间呢?php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

2023.07.28

1175

5

js 字符串转数组
js 字符串转数组

js字符串转数组的方法:1、使用“split()”方法;2、使用“Array.from()”方法;3、使用for循环遍历;4、使用“Array.split()”方法。本专题为大家提供js字符串转数组的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.03

1518

5

js是什么意思
js是什么意思

JS是JavaScript的缩写,它是一种广泛应用于网页开发的脚本语言。JavaScript是一种解释性的、基于对象和事件驱动的编程语言,通常用于为网页增加交互性和动态性。它可以在网页上实现复杂的功能和效果,如表单验证、页面元素操作、动画效果、数据交互等。

2023.08.17

9143

11

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

2023.09.01

820

4

js截取字符串的方法
js截取字符串的方法

js截取字符串的方法有substring()方法、substr()方法、slice()方法、split()方法和slice()方法。本专题为大家提供字符串相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.04

2164

5

Js中concat和push的区别
Js中concat和push的区别

Js中concat和push的区别:1、concat用于将两个或多个数组合并成一个新数组,并返回这个新数组,而push用于向数组的末尾添加一个或多个元素,并返回修改后的数组的新长度;2、concat不会修改原始数组,是创建新的数组,而push会修改原数组,将新元素添加到原数组的末尾等等。本专题为大家提供concat和push相关的文章、下载、课程内容,供大家免费下载体验。

2023.09.14

1409

5

js截取字符串的方法介绍
js截取字符串的方法介绍

JavaScript字符串截取方法,包括substring、slice、substr、charAt和split方法。这些方法可以根据具体需求,灵活地截取字符串的不同部分。在实际开发中,根据具体情况选择合适的方法进行字符串截取,能够提高代码的效率和可读性 。

2023.09.21

3629

3

js生成随机数方法
js生成随机数方法

JavaScript生成随机数的方法,包括使用Math.random()方法生成指定范围内的随机整数、生成随机字符串和生成随机颜色。根据具体需求,可以选择适合的方法来生成随机数,以实现各种功能 。

2023.09.25

1995

5

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WebStorm 官方调试文档
WebStorm 官方调试文档

共0课时 | 0人学习

React 教程
React 教程

共58课时 | 11.9万人学习

TypeScript 教程
TypeScript 教程

共19课时 | 6.5万人学习