必须用<form>包裹整页审批流程，因其支持回车提交、原生校验提示和真重置功能；而div+onclick需手动实现全部逻辑，易导致提交失败或体验缺陷。
直接用 <form> 包裹整页审批流程，比任何 JS 模拟提交都可靠——回车能提交、校验有原生提示、重置按钮真清空，绕开它等于自己造轮子还漏气。
为什么必须用 form 标签而不是 div + onclick
很多内部系统把审批页写成 <div onclick="submitForm()">，结果用户按回车没反应、点击后无 loading 状态、甚至数据根本没发出去。这不是 bug，是语义缺失：浏览器只对 <form> 内的 <input type="submit"> 或回车事件做默认提交行为。一旦用 div，就得手写全部逻辑——拦截回车、序列化字段、拼接 FormData、处理网络错误、手动清空状态……稍一遗漏就卡在“点了但没提交”上。
-
method="POST"必须显式声明，哪怕 action 先设为#占位 - 所有必填字段加
required，浏览器自动标红+弹 tooltip，比 JS 校验早半秒拦截 - 不要用
event.preventDefault()然后自己发请求——除非你真需要自定义上传进度或分步提交
input type="number" 和 type="date" 的坑要踩准
财务类审批最常栽在这两个类型上：金额输成“100元”或“100.000”，日期选完变成“2026/08/04”而非标准 YYYY-MM-DD，后端解析直接报错。
- 金额一律用
<input type="number" step="0.01" min="0">，禁掉字母和多余小数位 - 日期必须用
<input type="date">，别用text+ 日历插件——iOS 和安卓原生 picker 会强制输出2026-08-04，且不支持无效值（比如 2026-02-30） - 避免
value="0.00"这种初始化，会导致用户删光后仍显示 0.00；留空即可，靠required控制必填
附件上传必须限制 accept 并检查 file.type
用户传 .exe、.zip 或模糊截图（如 IMG_123456789.jpg），系统只报“文件类型不支持”，没人知道该传什么。更糟的是只允单文件，但一张发票+一张行程单+一张餐票实际要三张。
立即学习“前端免费学习笔记（深入）”；
-
<input type="file" multiple accept=".pdf,image/*">—— 浏览器级过滤，直接禁掉非 PDF 和图片 - JS 里别只看
file.type，iOS Safari 常返回空字符串，得 fallback 到file.name.split('.').pop().toLowerCase() - 上传前遍历
files，对.xls、.docx等明确提示：“请上传发票照片或 PDF，不支持 Excel 表格” - 已选文件列表要显示
file.name+Math.round(file.size / 1024)KB，别只写“已选 3 个文件”
审批人 select 动态加载不能硬编码 option
部门负责人换人、审批链路调整（比如新增“法务复核”节点），硬编码的 <option value="zhangsan">张三(财务)</option> 第二天就失效，且无法体现流转顺序。
-
select初始化为空，用 fetch 加载接口数据：/api/approvers?step=finance - 每个
option的value必须是唯一 ID（如user_123），不是姓名——姓名可能重复，ID 才能准确绑定权限 - 如果审批链是多级（部门负责人 → 财务 → 分管副总），前端要按顺序渲染多个
select，每个对应一个name="approver_step_1"、name="approver_step_2"
真正难的不是写完表单，而是让每个字段的约束边界清晰可见：金额不能输文字、日期不能选未来、附件只能传 PDF 和图、审批人列表随组织架构实时更新——这些不是锦上添花，是审批流不卡在中间环节的前提。
