请假天数自动计算与校验的核心是用 JavaScript 实时监听起止日期变化，通过时间戳差计算自然日天数（含首尾），并结合表单验证控制提交；进阶支持工作日筛选与节假日排除，需遍历日期并匹配节假日数组，HTML 需语义化并启用无障碍支持。
请假天数自动计算和校验，核心是用 JavaScript 实时监听起止日期变化，根据日期差算出天数（需考虑节假日、工作日等业务规则），再结合表单验证逻辑控制提交行为。
基础日期差计算（自然日）
最简场景下，只需计算两个日期之间的自然日天数：
- 用 input type="date" 获取开始、结束日期值（格式为 YYYY-MM-DD）
- 将字符串转为 Date 对象，注意月份从 0 开始，需用
new Date(dateStr)直接解析（现代浏览器支持） - 用时间戳相减除以 1000×60×60×24，再加 1（含首尾当天）
示例代码片段：
function calcDays(startDate, endDate) {
const start = new Date(startDate);
const end = new Date(endDate);
if (isNaN(start) || isNaN(end) || start > end) return 0;
const diffTime = end.getTime() - start.getTime();
return Math.floor(diffTime / (1000 * 60 * 60 * 24)) + 1;
}校验逻辑嵌入表单流程
把计算结果用于实时反馈和提交拦截：
立即学习“前端免费学习笔记（深入）”；
- 监听两个日期输入框的 change 或 input 事件
- 调用计算函数，更新页面显示的“请假天数”（如一个只读 input 或 span）
- 若天数 ≤ 0 或超出公司上限（如 30 天），给对应输入框添加 setCustomValidity() 错误提示
- 表单 submit 时，浏览器会自动检查 validity，阻止非法提交
进阶：按工作日/排除节假日计算
真实业务中常需剔除周末或配置的法定假日：
- 遍历 startDate 到 endDate 的每一天，用
date.getDay()判断是否为周六（6）或周日（0） - 维护一个节假日数组（如
['2025-01-28', '2025-01-29']），遍历时跳过匹配项 - 累计符合条件的日期数量作为有效请假天数
- 建议将节假日数据从后端接口获取或静态 JSON 文件加载，便于维护
HTML 结构关键点
保持语义清晰，方便 JS 绑定和无障碍访问：
- 两个 date 输入框必须有 name 和唯一 id，并用 label for 关联
- 显示天数的区域加 aria-live="polite"，让屏幕阅读器可感知变化
- 提交按钮用 type="submit"，不要用 button onclick 提交，确保原生校验生效
