必须用<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 和图、审批人列表随组织架构实时更新——这些不是锦上添花,是审批流不卡在中间环节的前提。



















