原生提交时字段“消失”是因为浏览器仅提交符合yyyy-mm-dd格式的有效值，非法输入导致input.value为空，该字段被静默丢弃；前端须校验value格式与逻辑有效性，后端必须重做解析和范围校验。
原生 <input type="date"> 提交时字段“消失”，不是你漏写了 name 或 JS 错了，而是浏览器直接跳过无效值——它只传通过校验的 YYYY-MM-DD 字符串，其他一概忽略。
为什么表单提交后后端收不到 date 字段
常见现象：前端显示有日期，FormData 里却查不到该 key；PHP 的 $_POST 或 Node.js 的 req.body 中完全缺失该字段名。这不是传输失败，是 HTML 表单规范行为。
- 用户手动输入非法格式（如
2026/08/19、19-08-2026）→input.value为空字符串 → 浏览器不将其加入提交数据 - 只填了年月（如
2026-08）或缺位（如2026-8-19）→ 同样触发校验失败，value 为空 - 未设
required属性时，空值不会阻断提交，但字段本身被静默丢弃
如何在前端确认 date 值是否合法
不能只看 input 是否有视觉内容，必须检查 input.value 是否为非空且符合格式。可靠判断方式只有两种：
- 用
new Date(input.value)构造，再检查isNaN(date.getTime())—— 注意：仅YYYY-MM-DD格式能被Date安全解析，其他格式结果不可靠 - 用正则
/^\d{4}-\d{2}-\d{2}$/初筛，再结合new Date()验证逻辑有效性（如 2026-02-30） - 监听
invalid事件可捕获校验失败瞬间，但无法替代主动检查
服务端必须重做日期解析与范围校验
前端的 min/max 和 UI 限制纯属装饰，用户粘贴、禁用 JS、curl 提交都能绕过。后端收到的字符串可能来自任何渠道，绝不能信任。
- PHP：用
DateTime::createFromFormat('Y-m-d', $dateStr)解析，再检查!$dt || $dt->format('Y-m-d') !== $dateStr - Node.js（Express）：用
dayjs(dateStr, 'YYYY-MM-DD', true)的严格模式，或new Date(dateStr)+isValid判断 - 无论是否设了
max="2026-12-31"，都得在服务端比对$dateStr —— 字符串比较在此场景下安全且高效
兼容性差的环境怎么兜底
iOS 16.4 之前、旧版 Android WebView 等环境里，type="date" 会退化成纯文本框，用户随意输入，毫无约束。此时仅靠属性和事件监听远远不够。
- 先检测支持：
document.createElement('input').type === 'date'，不支持则动态替换为type="text"+ 正则提示（如 placeholder="YYYY-MM-DD"） - 对所有 date 类型输入，强制绑定
input事件，用input.value = value.replace(/[^0-9\-]/g, '').replace(/^(\d{4})[-]?(\d{0,2})[-]?(\d{0,2})/, '$1-$2-$3')实时清洗 - 提交前统一调用
checkValidity()并阻止非法提交，避免后端承担本该由前端拦截的脏数据
最常被忽略的一点：日期字段“没传过来”往往不是 bug，而是浏览器按规范执行了静默过滤。别急着查网络请求，先 console.log(input.value) 看值本身是否已失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
