本文介绍如何在员工休假申请表中，基于下拉菜单选中的假期类型（如献血假），通过 javascript 动态校验并限制起止日期之间的最大天数（例如仅允许 2 天），确保前端验证逻辑准确、可维护且兼容实际业务场景。
在构建企业级休假申请表单时，不同假期类型往往对应不同的天数规则：例如“献血假”仅允许申请 1–2 天，“婚假”可能为 3 天，“年假”则无固定上限。若仅依赖后端校验，用户体验较差（提交后才提示错误）；因此需在前端实现精准、即时、可配置的日期范围限制。
核心思路是：监听表单提交事件 → 获取所选假期类型和日期 → 计算实际占用天数（含首尾日，故需 +1）→ 对特定类型强制校验天数上限。
以下是优化后的完整校验脚本（推荐置于 </body> 前或使用 DOMContentLoaded 包裹）：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
<script>
document.addEventListener('DOMContentLoaded', function() {
const form = document.querySelector('#leave-form');
if (!form) return;
form.addEventListener('submit', function(event) {
const startDateInput = document.querySelector('#startdate');
const endDateInput = document.querySelector('#tilldate');
const leaveTypeSelect = document.querySelector('#leavetype');
// 检查必填字段是否为空（防止空值导致 NaN）
if (!startDateInput.value || !endDateInput.value || !leaveTypeSelect.value) {
alert('请填写所有必填项（假期类型、开始日期、结束日期）');
event.preventDefault();
return;
}
const startDate = new Date(startDateInput.value);
const endDate = new Date(endDateInput.value);
const leaveType = leaveTypeSelect.value.trim();
// 验证日期有效性（避免无效日期如 2024-02-30）
if (isNaN(startDate.getTime()) || isNaN(endDate.getTime())) {
alert('请输入有效的日期');
event.preventDefault();
return;
}
// 计算天数差（含首尾日：2024-05-01 至 2024-05-02 = 2 天）
const daysDiff = Math.floor((endDate - startDate) / (1000 * 60 * 60 * 24)) + 1;
// 定义需限制为 2 天的假期类型（建议提取为常量，便于维护）
const twoDaysOnlyTypes = [
'leave for blood donation - two days allowed',
'test2- two days allowed',
'leave for marrage - two days allowed '
];
// 校验逻辑：仅当类型匹配 且 天数超限 时阻止提交
if (endDate < startDate) {
alert('结束日期不能早于开始日期');
event.preventDefault();
} else if (daysDiff > 2 && twoDaysOnlyTypes.includes(leaveType)) {
alert('该假期类型最多可申请 2 天');
event.preventDefault();
}
});
});
</script>✅ 关键改进说明：
- 使用 includes() 替代冗长的 || 判断，提升可读性与可扩展性；
- 增加空值与无效日期（如 NaN）防护，避免脚本崩溃；
- 明确注释“含首尾日”的计算逻辑（+1），避免业务歧义；
- 将受限类型抽离为数组常量，后续新增类型只需修改数组，无需改动逻辑；
- 添加 DOMContentLoaded 确保 DOM 加载完成后再绑定事件，避免 querySelector 返回 null。
⚠️ 注意事项：
- 前端校验不可替代后端校验！务必在 PHP 接收请求时再次验证 leavetype 和日期范围（防止绕过 JS）；
- 若假期类型名称含空格或特殊字符，建议数据库中统一规范（如用 slug 字段存储 blood_donation），前端用 data-value 存储标准化键值，提升健壮性；
- 如需实时反馈（非提交时），可监听 #leavetype 和日期输入框的 change 事件，动态禁用/提示用户。
通过以上实现，既满足了业务对假期天数的精细化管控，又保障了表单交互的专业性与容错能力。
