input事件是触发进度更新的正确时机，因其在每次字符增删、粘贴、中文上屏后立即触发；需为每个相关input绑定input事件监听器，updateProgress中读取event.target.value并按字段校验状态计算完成度，progress标签的value/max须由JS手动更新且推荐用小数表示。
input事件是触发进度更新的正确时机
用 input 事件监听输入变化，而不是 change 或 keyup。前者在每次字符增删、粘贴、中文上屏后立即触发，后者漏掉鼠标粘贴和输入法上屏场景，change 则只在失焦时才触发，完全无法支撑“动态反馈”。
常见错误是绑了 keyup 还发现粘贴不响应，或者等用户填完所有字段才计算进度，失去实时性。
- 对每个需参与进度计算的
<input>绑定addEventListener('input', updateProgress) -
updateProgress函数里直接读event.target.value，别用valueAsNumber或parseInt，避免空值转NaN导致计算中断 - 如果字段有必填逻辑（如邮箱格式），校验失败时该字段不计入有效进度，但不要阻断后续输入
progress标签的value/max必须配合JavaScript手动更新
<progress> 是纯展示组件，没有自动绑定能力。它不会因为你改了某个 input 的值就自己动起来——你得用 JS 算出当前完成度，再写进 value 属性。
容易踩的坑是把 max 设成固定值（比如 100），但实际字段数可能动态增减；或者直接用 value 做百分比（如 value="75"），却忘了 max 默认是 1，导致进度条永远只显示 75/1 = 7500%。
立即学习“前端免费学习笔记（深入）”；
- 初始化时设
<progress max="1" value="0">，后续统一用小数（0.0–1.0）更新value，避免整数除法误差 - 进度 = 已填且校验通过的字段数 ÷ 总字段数（含隐藏或条件字段）
- 若某字段支持多值（如
multiple文件上传），需单独定义“完成”标准，不能简单按是否为空判断
表单字段状态与进度条视觉反馈要解耦
进度条本身不负责表达“哪个字段错了”，它只回答“整体走到了哪”。错误定位、高亮、提示文案这些，得靠给对应 input 的父容器加 is-invalid 类，再由 CSS 控制样式。混在一起写，后期改主题或加动画会非常痛苦。
有人喜欢在 input 上直接写 style.borderColor = 'red'，结果一加过渡动画就卡顿，或者换深色模式时边框消失——这都是把状态和表现耦死了。
- 用
element.parentElement.classList.toggle('is-invalid', !isValid)控制校验状态 - 进度条只响应整体数值，不要在
updateProgress里塞 DOM 操作（如document.querySelector('.error-tip').textContent = '...'） - 如果需要“填写到某步才显示下一步按钮”，这个开关逻辑也应独立于进度条渲染，用布尔变量控制更稳妥
文件上传类input需要额外监听progress事件
普通文本输入靠 input 事件就够了，但 <input type="file"> 的上传过程是异步的，它的进度得从 XMLHttpRequest.upload.onprogress 或 fetch 的 ReadableStream 中获取，和表单填写进度不是一回事。
强行把文件上传进度塞进同一个 <progress> 标签，会导致用户困惑：“我刚输完名字，怎么进度突然跳到 80%？”——因为上传还没开始，但你用的是总进度归一化算法。
- 文件上传进度建议单独用一个
<progress>，ID 区分（如id="uploadProgress"） - 上传开始前，可临时禁用表单其他输入（加
disabled或遮罩层），避免用户边传边改已填内容 - 上传完成回调里再调一次
updateProgress()，补上“上传完成”这一项的权重
