修:显示区半径输入框被浏览器原生校验误判
现象:输入任意正常半径(3、3.5、7.25…)提交时弹 「请输入有效值。两个最接近的有效值分别为 2.55 和 3.05」。 根因:<input type="number"> 的 **step 是相对 min 递增**的,不是「step 的整数倍」。 min=0.05 + step=0.5 ⇒ 合法值只有 0.05 / 0.55 / 1.05 …,于是 3 和 3.5 全被判非法。 而这是**浏览器原生**提示:JS 与后端都拦不到(我们自己的校验根本没机会说话)。 实测对照(同一元素换 step,其余不动): step=0.5 :0.05✓ 1✗ 3✗ 3.5✗ 7.25✗ 13.37✗ step=0.05 :0.05✓ 1✓ 3✓ 3.5✓ 7.25✓ 13.37✗ ← 仍会拦任意小数 step=any :全 ✓ ← 采用 保留 min/max(真实边界,且给 spinner 范围),只把 step 放开交给 JS/后端校验, 理由与写法都记在模板注释里。 同一 bug 类加了通配守卫,防的是下次换个页面又踩: - TestNumberInputStepNeverMismatchesMin:扫**所有**模板的数字框, 凡「有 min 且有数值 step」就要求 min 是 step 的整数倍(或改用 any); - TestTopicAreaRadiusInputAllowsAnyStep:列表里的输入框是 JS 动态建的,模板扫不到, 单独钉住 step='any'。 变异验证过:把 step 改回 0.5,守卫立刻红。 实测(无头):输入 3.5 后 validationMessage 为空、form.checkValidity() 为真 ⇒ 回车提交不再弹气泡;隐藏字段正确更新为 radiusKm:3.5;越界值只给我们的中文提示 (stepMismatch=false、rangeUnderflow=true,说明「step 误判」这一类已消除)。 全站其它数字框(如迷雾遮罩的 radius_m,min=50/step=50)本来就合法,未改动。
This commit is contained in:
@@ -37,7 +37,9 @@
|
||||
<input type="hidden" name="crs" value="">
|
||||
<div class="area-tools">
|
||||
<label class="f" style="flex:0 1 150px;margin:0"><span>新圆半径(公里)</span>
|
||||
<input type="number" id="area-new-km" min="0.05" max="2000" step="0.5" value="3"></label>
|
||||
{{/* step 必须是 any:它是相对 min 递增的,min=0.05 + step=0.5 的合法值只有
|
||||
0.05/0.55/1.05…,用户填 3 或 3.5 会被浏览器判非法并弹原生提示。 */}}
|
||||
<input type="number" id="area-new-km" min="0.05" max="2000" step="any" value="3"></label>
|
||||
<button class="btn" type="button" id="area-clear">清除全部</button>
|
||||
<span class="muted" id="area-hint"></span>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user