2

我正在尝试使用 HTML5<input type="number">元素对数字字段进行 Javascript 客户端验证。还有服务器端验证，所以我们不要为此大吵大闹... ;)

我希望提供三种状态级别的验证：绿色表示定义范围内的有效数字，黄色表示超出范围的数字或空字段，红色表示非数字输入。

我的问题是 IE11（我相信 IE10）似乎.value为非数字输入返回了一个空白属性。也就是说，如果我abc在框中输入，.value就是"". 这使我无法区分黄色（空白）和红色（垃圾）。

我知道新.valueAsNumber属性的存在，但这并不能完全帮助我，因为我无法区分其他浏览器上的空和 IE10/11 上的非数字（.value为空，.valueAsNumber是NaN）。

有没有人解决过这个问题？我不想求助于跟踪按键，我想支持旧版浏览器（回到 IE8），这些浏览器恢复到type="text"并且没有.valueAsNumber. 提前致谢...

编辑：只是为了澄清（希望如此），我的问题是 IE10/11 中的.value和输出.valueAsNumber不允许我区分无输入和非数字输入。我希望能够在没有浏览器嗅探和回退到type="text".

4

2 回答 2

2

你能不能给你的输入类分配一个合理的默认值（零？）？那么您不需要首先在代码中进行区分吗？

在我的书中，实用主义总是胜过独创性；）

于 2013-11-08T12:25:47.417 回答
0

继续并valueAsNumber在支持它的浏览器中使用。

var
  coerced,
  value,
  input = yourInput;

if(typeof input.valueAsNumber !== "undefined") {
   value = (isNaN(input.valueAsNumber)) ? "dummystring" : input.valueAsNumber;
} else {
   value = input.value; 
}

if(typeof input.value === "string") {
 //non-numeric
} else {
 coerced = +input.value;
 //do validation on coerced - it is now a number
}

支持的浏览器valueAsNumber，他们也支持input[type=number]，所以这将解决你的问题。

于 2013-11-08T12:46:28.030 回答