表单提交前必须校验required和type="email"是否生效：需配合form的onsubmit阻止默认行为，补JS正则校验；电话用pattern限制格式；select首项设disabled selected占位；datetime-local需动态设默认值并降级处理；提交按钮需禁用防重复；reset时手动清空datetime-local并确保数据库支持utf8mb4。
表单提交前必须校验 required 和 type="email" 是否生效
很多页面看着有“必填”提示，但用户不填也能提交，根源常是只加了 required 属性却没配 form 的 onsubmit 阻止默认行为，或浏览器兼容性被忽略。Chrome 和 Safari 对 type="email" 有原生校验，但 Firefox 在某些旧版本里会跳过，建议补一层 JS 校验逻辑。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 所有关键字段（如
name、phone、email、pet_name）都加上required -
email输入框用<input type="email" required>，同时 JS 中用/^[^\s@]+@[^\s@]+\.[^\s@]+$/再验一次格式 - 电话字段别只用
type="tel"——它不校验格式，建议加pattern，例如pattern="[0-9]{11}"（国内手机号）并配title="请输入11位手机号" - 提交按钮绑定
onclick="return validateForm();"，函数里返回false可阻止提交
select 下拉项要预设 disabled selected 占位选项
用户一进页面就看到“请选择科室”被选中，比默认选第一个真实选项更安全。否则容易误提交“内科”而实际想约的是“牙科”，且后端难区分是用户主动选还是没动过下拉框。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 首项写成
<option value="" disabled selected>请选择就诊科室</option> - 真实选项的
value用简短英文或数字（如"derm"、"dent"），别用中文，方便后端解析和埋点统计 - 如果科室数据来自后端 API，务必在 JS 渲染
select后，手动调用select.selectedIndex = 0确保占位项高亮 - 移动端 Safari 对
select的样式支持弱，避免用 CSS 强改箭头或高度，优先靠原生体验
日期和时间选择用 input type="datetime-local" 要注意时区和初始值
datetime-local 不带时区信息，浏览器按本地时间渲染，但提交到后端时，若服务器在 UTC+8，而用户在 UTC-5，可能差13小时。更麻烦的是，部分安卓 WebView 仍不支持该类型，直接退化为文本框。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 设置默认值时用 JS 动态写入，例如
new Date().toISOString().slice(0,16)（输出类似"2024-05-20T14:30"），避免 HTML 里硬编码死值 - 后端接收时统一转为 UTC 时间存储，前端展示再转回本地时间
- 对低版本环境，加 JS 检测：
if (!('valueAsDate' in document.createElement('input')))，命中则加载轻量级日历库（如 flatpickr）替代 - 时间粒度控制在 30 分钟一档，避免用户选到“14:13”这种无法排班的时间点
提交后禁用按钮 + 显示加载状态，防止重复点击
用户点一次“预约”后没反应，手快再点两下，后端可能收到三条相同请求，数据库里多出两条脏数据。这不是 UX 问题，是并发风险。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 按钮初始
id="submit-btn"，点击后立即执行：btn.disabled = true; btn.textContent = "提交中…"; - 成功回调里重置按钮：
btn.disabled = false; btn.textContent = "确认预约"; - 失败时不仅要弹提示，还得恢复按钮状态，否则用户以为卡死了，刷新页面又重填一遍
- 别用
setTimeout模拟加载，真实请求必须等fetch().then()或XMLHttpRequest完成后再操作按钮
最易被忽略的是表单 reset 行为：用户填了一半去查资料，切屏回来发现页面刷新了，或者点了“重填”按钮清空了所有内容，但 datetime-local 字段可能还留着昨天的时间——这是因为部分浏览器不会重置 valueAsDate，得用 JS 手动清空。还有，宠物名字和品种字段如果允许输入 emoji（比如?），后端数据库字段得是 utf8mb4，否则存成乱码或截断。
