input[type="date"]的空值是空字符串""，非null或undefined；!value会误判非法值，value==null无效，唯一可靠判断是value==="";required属性需在form内由submit触发才生效，且服务端必须二次校验。

input[type="date"] 的空值不是 null，也不是 undefined，而是空字符串 "" —— 这是所有校验逻辑的起点，错判类型就会直接失效。

为什么 !value 或 value == null 不可靠

浏览器对 type="date" 的空状态定义非常明确：未选择时 element.value === ""。但很多开发者误用以下方式：

• !input.value 看似简洁，但会把 "0000-00-00"、"---- -- --"（某些旧版 Safari 表现）等非法值也当作“空”放过
• input.value == null 或 typeof input.value === 'undefined' 完全无效——字段始终存在，只是值为空字符串
• input.value.length === 0 可用，但不如 input.value === "" 语义精准，且无法区分 " "（带空格）这种边缘情况

HTML 原生 required 属性怎么用才生效

required 是最轻量的空值拦截手段，但它有硬性前提：

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 必须包裹在完整 <form></form> 标签内，且提交由 <button type="submit"></button> 或 <input type="submit"> 触发
• 仅对 input[type="date"]、input[type="text"]、select、textarea 生效；input[type="hidden"] 或自定义组件加了也白加
• 它只认 value === ""，不处理首尾空格——用户粘贴 " 2024-01-01 " 会被接受，但业务上可能需 trim()

JS 手动校验时该检查什么

绕过原生提交或需增强逻辑时，务必分两步走：

• 先确认是否为空：input.value === "" —— 这是唯一可靠的空值判断
• 再确认是否合法（可选）：!isNaN(new Date(input.value).getTime())，防止用户绕过前端提交 "9999-99-99" 这类非法字符串
• 如果需要兼容手动输入的非 ISO 格式（如 "dd/mm/yyyy"），就不能依赖 type="date"，得换 type="text" 并自行解析，此时空值仍为 ""，但合法性校验要重写

最容易被忽略的是：服务端永远不能信任前端的任何空值判断。哪怕加了 required 和 JS 校验，PHP 或 Node.js 接收时第一行仍应写 if (empty($_POST['date_field'])) { ... } 或 if (!req.body.date) { ... } —— 因为浏览器可被禁用、请求可被篡改、表单可被绕过。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！