本文介绍如何在员工请假表单中,基于下拉菜单选中的请假类型(如献血假),通过 javascript 动态校验并限制起止日期之间的天数,确保符合业务规则(例如仅允许最多2天),避免提交无效数据。
在构建企业级请假系统时,不同类型的假期往往对应不同的天数限制策略——例如“献血假”通常仅批准1–2天,“婚假”可能为3天,“年假”则可长达15天。若仅靠后端校验,用户体验差(提交后才报错);而前端实时约束能显著提升交互友好性与数据合规性。
实现的关键在于:将请假类型与最大允许天数建立映射关系,并在表单提交前精确计算日期跨度(含首尾日),再结合条件判断触发拦截。
以下是优化后的完整解决方案:
✅ 正确的日期天数计算逻辑
注意:new Date(end) – new Date(start) 返回毫秒差,需转换为自然日,并加1以包含首尾两天(例如2024-05-01 至 2024-05-02 应计为2天):