html5 required 属性是前端必填校验最简方案，但需配合 type 语义与 js 补充；静态下拉更稳，动态需加载态与错误回退；提交按钮须禁用防重；日期控件需兼容降级。
表单必填项没加 required 导致提交空数据
用户点提交却没任何提示，后端收到一堆空字段——大概率是前端校验漏了。HTML5 原生校验最简单有效的方式就是给关键输入加 required 属性，比如姓名、手机号、年级这些硬性字段。
注意：required 对 type="email" 和 type="tel" 有额外语义支持，但不会自动验证格式是否真合法（比如 123@ 也算通过 email 校验），所以别只依赖它。
-
<input name="name" required>—— 必填，留空会弹浏览器默认提示 - 多个
radio组只需在任一选项上加required，整组即被约束 - 使用
fieldset+legend包裹一组选项时，required不起作用，得落到具体input上
下拉年级/班级选项写死在 HTML 里还是用 JS 动态生成
如果学校年级固定为“高一/高二/高三”，班级编号也稳定（如每级 1–16 班），直接写死 HTML 更快、更可靠，也避免 JS 加载失败导致下拉为空。
但若未来要对接教务系统（比如按年级动态加载对应班级），就得用 JS 请求接口再渲染 select。此时务必加 loading 状态和错误 fallback，比如初始显示 <option disabled selected>加载中…</option>。
- 静态写法示例：
<select name="grade"><option value="gao1">高一</option></select> - 动态渲染时，清空旧
option再appendChild，别用innerHTML = ""清空，否则已选值可能丢失 - 移动端 Safari 对
select样式支持差，自定义样式需用div模拟，但会牺牲原生体验和可访问性
提交按钮点击后重复提交问题
用户手快连点两次，后端就收到两条报名记录——这是校园活动页最常见的数据污染来源。
最轻量的防重方案是在 JS 中提交瞬间禁用按钮，并改文字提示，等响应回来再恢复。不要只靠后端幂等或数据库唯一索引来兜底，前端拦截才是第一道防线。
- 给按钮加
id="submit-btn"，JS 中：btn.disabled = true; btn.textContent = "提交中…"; - 成功/失败回调里必须恢复按钮状态，否则用户卡死；建议用
finally块统一处理 - 别用
setTimeout延迟恢复，网络慢时按钮可能提前解禁，照样重复提交 - 如果用了
fetch，记得检查response.ok，HTTP 500 也应视为失败并恢复按钮
手机上日期/时间选择器不一致甚至不出现
type="date" 在 iOS Safari 和部分安卓 WebView 中表现割裂：有的唤起原生日历，有的退化成文本框，还有的直接不支持（比如微信内置浏览器）。
如果活动截止时间必须精确到日，又要求强一致性，别只信 type="date"。要么引入轻量级日期库（如 flatpickr），要么降级为年份+月份+日期三个下拉框手动组合。
- iOS 上
input[type="date"]默认不显示清除按钮，用户无法轻松清空，得自己加一个<button type="button">×</button> - 微信内嵌浏览器对
type="datetime-local"支持极差，基本当普通文本框处理，慎用 - 如果只要“今天之后可报”，可用 JS 校验
new Date().toDateString() ，比依赖原生控件更可控
真正难的不是把表单画出来，而是让每个输入框在 iPhone、安卓、微信、钉钉里都行为一致，且出错时用户能立刻明白哪错了、怎么改。很多“样式好看”的页面，一进微信就崩，原因往往就藏在某个没设 required 的手机号框，或一个被 Safari 忽略的 type="date" 里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
