为什么此输入有效

Question

使用input.validity.valid,为什么我的数字输入0.对此方案中的值返回有效？

<input type="number" min="1" max="999" step="1" value="0." id="one" /> <!--Valid??-->
<input type="number" min="1" max="999" step="1" value="0.0" id="two" /> <!--fine-->
<input type="number" min="1" max="999" step="1" value="0" id="three" /> <!--fine-->

Chrome 37.0.2062.103 m

的jsfiddle

编辑:

奇怪的是,任何带有句号结尾的负数也会破坏验证:

<input type="number" min="1" max="999" step="1" value="-14." id="one" />

的jsfiddle

Answer 1

这里实际上有两个答案:

1. Chrome中存在一个错误,这意味着0.当您在输入字段中输入/设置值时,无法正确验证值.
2. 如果在HTML标记中设置了无效值,则浏览器必须忽略它并将值设置为空字符串,除非标记该字段,否则该字符串被视为有效required.

严格地说,它是第一个导致你所看到的行为,因为它阻止#2发生,但如果错误在Chrome中得到修复,那么问题就在于(即只处理初始标记,而不是任何随后的用户交互),#2将适用.

值得注意的是,#2是导致Firefox中类似(但不完全相同)行为的原因.

1. Chrome错误

#1的原因是Chrome在其rangeUnderflow检测和badInput检测中使用了不同的解析算法.

rangeUnderflow使用Decimal::fromString(...)该方法返回NaN如果输入的结束.导致rangeUnderflow返回false:

if (!numericValue.isFinite())
   return false;

相反,badInput使用StringToDoubleConverter::StringToDouble(...)基本上忽略尾随,.因此输入不被视为"坏".

根据规格:

如果字符串包含以下内容,则该字符串是有效的浮点数:

1. 可选地,U + 002D HYPHEN-MINUS字符( - ).
2. 按给定顺序执行以下一项或两项操作:
   1. 一系列一个或多个ASCII数字.
   2. 1. 单个U + 002E FULL STOP字符(.).
      2. 一系列一个或多个ASCII数字.

请注意,2.2.2不是可选的 - 即如果你有一个,.你必须有数字.

所以这badInput是不正确的.(如果Chrome至少一致0.认为有效,rangeUnderflow则会检测到)

2.标记与用户输入

但是,如果/当他们修复Chrome中的错误时,问题中的HTML 仍会显示为有效.为什么？

例如,如果您value="aaa"在HTML中设置.输入仍将显示为有效,即使aaa将导致badInput要true.

这是因为在解析/呈现页面时,Chrome会对属性值运行值清理算法.当它看到一个不是有效浮点数的值时,它必须根据规范的要求将输入值设置为空字符串.除非输入已标记,否则空字符串被视为有效required.这在Chrome中目前不会发生,value="0."因为它(错误地)传递了值清理算法.但是,如果/当他们修复Chrome中的错误时,就会发生这种情况.

如果你实际键入aaa输入,它将显示为无效,即badInput===true.同样,在Firefox和Chrome中,如果他们修复了这个bug,如果你输入0.字段,它会给出badInput===true,因此valid===false.