HTML input[type="date"]设为必填直接加required属性即可，浏览器原生支持校验；需注意预设value必须为YYYY-MM-DD格式，且后端必须二次校验日期合法性与业务规则。
HTML input[type="date"] 怎么设为必填
直接加 required 属性就行，这是最简、最可靠的方式。浏览器原生支持，无需 JS 就能触发校验提示。
注意：它只检查用户是否选了日期，不校验日期是否合法（比如 2024-02-30 不会当场报错，但提交时多数浏览器会拦截）。
-
—— 最小可用写法 - 建议同时加
min和max，避免用户选到明显无效日期（如未来十年或 1900 年） - 如果用了
value预设值，必须是YYYY-MM-DD格式（如value="2024-06-15"），否则会被当作空值，required会失效
为什么加了 required 还没效果
常见原因不是属性写错了，而是被其他逻辑覆盖或隐藏了校验行为。
- 表单用
event.preventDefault()拦截了 submit，导致浏览器默认校验没触发 - 输入框被包裹在
display: none或visibility: hidden的容器里，部分浏览器会跳过校验 - 用了自定义样式（如
-webkit-appearance: none）但没补全伪元素交互，可能影响焦点和校验状态 - 某些旧版 Safari 对
required+type="date"支持不稳定，可加oninvalid提示兜底
怎么让必填校验提示更友好
浏览器默认提示文字（如“请填写此字段”）无法直接修改，但可以通过属性控制提示时机和内容：
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 加
title="请选择日期"，部分浏览器会在校验失败时显示该文字（非全部支持） - 用
setCustomValidity()手动干预：比如在input失去焦点时检查值是否为空，再调用setCustomValidity("日期不能为空") - 配合
:valid/:invalidCSS 伪类做视觉反馈，例如边框变红、图标切换
后端还用校验吗
必须校验。前端 required 完全可绕过（禁用 JS、手动改 DOM、curl 提交等），且不保证日期格式和业务逻辑（比如“入职日期不能晚于今天”）。
后端收到的值是字符串，格式固定为 YYYY-MM-DD，但需额外检查：
- 是否为空字符串（前端绕过
required后可能传空） - 是否符合 ISO 8601 格式（正则
^\d{4}-\d{2}-\d{2}$） - 是否是真实存在的日期（如排除 2024-02-30）
- 是否满足业务规则（如大于出生日期、不晚于系统当前日）
别依赖前端任何约束，日期字段尤其容易出数据问题——格式错一位、时区漏处理、跨年边界没覆盖，都可能让后端解析失败或逻辑跑偏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
