3

我在处理具有type="number"指定的可选字段的 jQuery 验证时遇到了一个非常复杂的问题。发生的情况是浏览器（本例中为Chrome）允许用户在字段中输入普通字母，具有拦截表单提交的想法，无论如何，当查询字段值时，它将返回一个空字符串。

在继续之前，我必须说这有点符合规范，其中指出：

用户代理不得允许用户将值设置为不是有效浮点数的非空字符串。

后来：

值清理算法如下：如果元素的值不是有效的浮点数，则将其设置为空字符串。

问题出在这里：如果我在可选的数字输入字段中输入字母（Chrome 允许这样做），jQuery 验证会得到一个空字符串值，该值会正确验证，因为该字段是可选的。此外，我得到了 emtpy 字符串服务器端，这没问题，因为该字段在数据库中可以为空，并且很高兴被保存。

目前，我能想到的唯一解决方法是：

$('input[type="number"]').keypress(function (evt) {
    if (evt.keyCode < 48 || evt.keyCode > 57)
        evt.preventDefault();
});

问题是上述方法不起作用，例如，如果用户在那里复制粘贴了一些错误的输入。现在，我意识到如果用户如此坚决地输入愚蠢的数据，他只能面对后果并让该字段无效，但试图成为一名优秀的开发人员我想知道是否有一种方法可以在不使用的情况下获取输入的值上面的workarond（并且也没有为copypaste编写另一个解决方法）。

4

3 回答 3

4

您可以使用.focusout() jquery 的事件。http://api.jquery.com/focusout/

然后用于isNumeric检查有效号码。http://api.jquery.com/jQuery.isNumeric

所以像这样的东西..

$('input[type="number"]').focusout(function (evt) {
   if(!$.isNumeric($(this).val())){
     $(this).val("");
   }
});
于 2013-05-10T14:56:38.550 回答
3

jquery.alphanum是我为防止输入无效文本而编写的插件。它可以很好地处理复制粘贴，并且兼容跨浏览器。

$('input[type="number"]').numeric();

该插件捕获粘贴事件并在文本对用户可见之前对其进行过滤。

于 2013-05-10T15:12:02.667 回答
0

您可以检查 input.validity.badInput 以查看用户是否输入了无效数字。如果输入的数据无效（除非您使用 novalidate=""），浏览器不应让用户提交表单。

您无法获取用户输入的实际数据，因为您说过您只需要一个数字，因此浏览器会处理它。如果您想访问数据，请使用 type=text 和 pattern="" 或类似的。

于 2013-09-03T17:39:53.530 回答