需手动增强原生input：日期加min属性防历史日期并服务端校验，人数设min/max/step防非法值，用js监听事件联动校验余量，适配移动端键盘并真机测试。

直接用 <input type="date"> 和 <input type="number"> 就能实现，但默认行为在移动端体验差、日期范围不校验、人数超限没约束——得手动补逻辑。

日期选择必须加 min 属性防填过去时间

用户可能手误选昨天或上个月，提交后才发现活动已过期。浏览器原生 <input type="date"> 不限制最小值，默认允许任意历史日期。

• 加上 min="2024-06-15"（替换成活动最早可报日期），浏览器会禁用此前所有日期
• 服务端仍需二次校验，因为前端属性可被开发者工具随意修改
• 注意格式必须是 YYYY-MM-DD，写成 2024/06/15 或 15-06-2024 会被忽略
• iOS Safari 对 min 支持较晚（iOS 15.4+），旧版本会退化为普通文本输入，建议加 JS 回退提示

人数用 number 输入框要设 min、max 和 step

只写 <input type="number"> 很危险：用户能输负数、小数、超大数字，甚至粘贴文本如 "abc"（部分浏览器会清空，但部分保留并提交空值）。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• min="1" 防止填 0 或负数
• max="20"（按活动上限设）限制单次最多报名人数
• step="1" 确保只能选整数；不写的话默认允许小数，用户点上下箭头可能出 1.0000000001
• 别依赖 required 单独校验——它只管是否为空，不管值是否合法

组合校验得用 JS 监听 change 和 input 事件

光靠 HTML 属性不够：比如用户先选了日期，再改人数，系统应实时判断“该日期剩余名额是否足够”。这个逻辑浏览器做不到。

• 监听 date 和 number 输入框的 change（失焦）和 input（实时）事件
• 拿到 date.value 和 number.valueAsNumber（后者自动转数字，比 parseInt() 更可靠）
• 查预存的余量数据（可从 data- 属性里读，或发轻量 API 请求），动态禁用提交按钮 + 显示提示
• 避免在 input 里频繁请求接口，可加 setTimeout 防抖（比如延迟 300ms）

移动端日期和数字键盘适配很关键

Android Chrome 点 type="date" 弹原生日历，但 iOS Safari 在某些微信 WebView 里会降级为文本框；type="number" 在安卓弹数字键盘，iOS 却可能弹全键盘。

• 对日期：加 inputmode="numeric" 没用，正确做法是用 pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" + inputmode="text" 强制调出数字键盘（仅限 iOS 微信等场景）
• 对人数：明确写 inputmode="decimal"（iOS 数字键盘带小数点）或 inputmode="numeric"（纯数字），再配合 pattern="[0-9]*" 过滤粘贴
• 真机测试不能省——模拟器里一切正常，真机上微信、QQ、钉钉内嵌浏览器表现差异极大

最易被忽略的是：日期和人数两个字段的联动状态没持久化。比如用户填完退出再回来，JS 校验状态丢失，但 HTML 属性还在，容易造成“界面上看着能提交，实际后端拒绝”的割裂感。得把校验结果也同步到按钮的 disabled 属性，并在页面恢复时重新触发一次验证。

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