step 属性对 input[type="week"] 无效,因周非线性可分;应结合 min/max 限定范围,并用 JavaScript 解析 YYYY-Www 格式校验周数奇偶性,且服务端必须二次验证。

step 属性对 input[type="week"] 无效
直接给 input[type="week"] 加 step="2" 不会起作用——浏览器完全忽略它。HTML 规范明确禁止对 week 类型使用 step,因为“周”不是线性可等分的数值单位(比如第 20 周之后跳到第 22 周,语义上不成立)。你看到的无反应、控制台无报错、表单仍能提交任意周,都是正常表现。
用 min/max + JavaScript 校验实现“隔周选择”
真正可行的方案是:先用 min 和 max 锁定合法周范围,再靠 JS 拦截非法输入。关键在解析 YYYY-Www 格式并判断周数是否为偶数(或按需模余):
const weekInput = document.querySelector('input[type="week"]');
weekInput.addEventListener('change', () => {
const value = weekInput.value; // e.g. "2024-W22"
if (!value) return;
const [, year, weekStr] = value.match(/^(\d{4})-W(\d{2})$/) || [];
const weekNum = parseInt(weekStr, 10);
if (weekNum % 2 !== 0) { // 要求只选偶数周
alert("请只选择偶数周(如 W22、W24)");
weekInput.value = ""; // 清空非法值
}
});
-
value是只读字符串,格式固定为YYYY-Www,不能直接加减 - 正则提取周数时注意
W01到W53都可能,\d{2}足够覆盖 - 仅靠
change事件不够,用户粘贴或键盘修改时需监听input或blur
服务端必须二次校验
前端 JS 可被绕过,任何“隔周”逻辑都必须在后端复现。例如 Node.js 中:
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML,替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度,HTML 能同时承载排版、表格、SVG 等。
function isValidEvenWeek(weekStr) {
const match = /^(\d{4})-W(\d{2})$/.exec(weekStr);
if (!match) return false;
const weekNum = parseInt(match[2], 10);
return weekNum >= 1 && weekNum <= 53 && weekNum % 2 === 0;
}
- 别信
weekStr的格式合法性——攻击者可发2024-W999或 SQL 注入片段 - 周数上限不是固定 53,不同年份最大周数不同(ISO 8601),但业务若只要求“偶数”,校验
% 2 === 0已足够 - 如果要求“每 3 周选一次”,把
% 2换成% 3 === 1这类表达式即可
替代方案:下拉菜单比原生 week 更可控
如果业务中可选周范围固定(比如未来 12 周),用 <select> 反而更稳:
立即学习“前端免费学习笔记(深入)”;
<select name="target_week"> <option value="2024-W22">2024 年第 22 周(6.17–6.23)</option> <option value="2024-W24">2024 年第 24 周(7.1–7.7)</option> </select>
- 选项由后端生成,天然保证只含合法周,无需前端计算
- 用户无法输入/粘贴非法值,无障碍支持也更好
- 缺点是失去原生日期控件的交互体验,且需额外维护周描述文本
step 简单约束。真要限制步长,就得接受「前端拦截 + 后端兜底」的组合拳,或者干脆放弃原生控件。


















