抄表表单需按「户号→上期读数→本期读数→用量」顺序布局，用Bootstrap的form-group+row+col控制响应式，number类型输入框设min/step，户号加maxlength，用量实时计算并防负值，blur校验必填与逻辑，扫码录入户号提升效率。
Bootstrap 表单结构怎么搭才符合抄表业务逻辑
水电费抄表表单不是普通联系表单，核心是「户号+上期读数+本期读数+自动计算用量」，必须保证字段顺序清晰、数值输入受控、关键项不可跳过。Bootstrap 本身不提供业务逻辑，但用 form-group + row + 语义化 input 类型能快速组织出高可用布局。
实操建议：
- 用
col-md-4或col-sm-6控制每行字段数量，避免在小屏上挤成一列导致误触 -
input必须设type="number"，并加min="0" step="0.01"（水表常用小数，电表可能为整数） - 户号、房间号等文本字段加
maxlength（如maxlength="12"），防止录入超长编号干扰后续导出 - 不要依赖 Bootstrap 的
form-control-lg做放大——抄表员常戴手套操作，真正有效的是padding: 12px 16px+font-size: 18px
怎么让“用量 = 本期 − 上期”实时计算且防负值
抄表员手抖输错本期读数时，如果直接显示负用量，容易漏发现错误。不能只靠前端 JS 计算，还得约束输入行为。
实操建议：
- 给上期读数（
id="last-read"）和本期读数（id="current-read"）都绑定input事件，而非change——后者要失焦才触发，抄表时连续录入会卡顿 - 计算前先用
parseFloat()转类型，空值或非数字时设为0，避免NaN污染结果 - 用量字段设为
readonly，并加style="background-color:#f8f9fa;"视觉降权，明确告知用户“这是算出来的，别改” - 如果
current-read ，用量显示为 <code>"异常"并给input加红色边框（border-color:#dc3545），不强行修正数值——现场可能真有倒转表计，得留人工判断空间
提交前怎么校验必填项又不干扰抄表节奏
抄表常在楼道、地下室等信号弱环境操作，表单提交失败代价高。校验不能弹窗打断，也不能只靠 HTML5 的 required（它只在 submit 时触发，且样式难统一）。
实操建议：
- 离开任一必填字段（
blur）时立即校验：户号非空、上期/本期读数为有效数字、用量非异常 - 校验失败字段用
is-invalid类，并在下方用<div class="invalid-feedback"> 显示提示，比如「户号不能为空」或「本期读数不能小于上期」 <li>提交按钮加 <code>disabled状态，仅当所有.is-invalid全清除后才removeAttribute('disabled')——避免手快点两次 - 禁用浏览器默认校验（
novalidate属性加在form标签上），否则 Chrome 会在 submit 时覆盖你写的提示 - 户号输入框旁放一个
<button type="button" class="btn btn-outline-secondary">扫码</button>，点击后调用zxing-js库的BrowserMultiFormatReader - 扫码成功后，用
document.getElementById('account-id').value = result.text填入，再自动 focus 到上期读数框——减少手动切换 - 微信中需提前在
config里声明jsApiList: ['openLocation']（虽然不用定位，但部分安卓机不声明就拒绝调用摄像头） - 扫码失败时不要静默，要在按钮下方用
.text-danger显示「请确保光线充足，重试」，因为抄表常在昏暗环境
移动端扫码录入户号时怎么兼容微信/支付宝浏览器
很多抄表员用手机扫二维码快速填户号，但微信内置浏览器对 input type="file" 调用相机限制多，直接扫码识别更可靠。
实操建议：
抄表表单真正的难点不在样式，而在“如何让一线人员 3 秒内完成一次录入”。所有交互延迟要压到 100ms 内，所有提示文案必须比用户当前想的还快半步——比如他刚输完本期读数，用量和校验结果就得立刻贴着输入框出现，而不是等他挪到下一个字段才反应过来。
