使用jQuery验证数字类型输入

Question

我遇到一个非常复杂的问题，在指定type="number"的可选字段上处理jQuery验证。会发生什么情况是浏览器（在这种情况下是Chrome）允许用户在字段中输入正常字母，并想要拦截表单的提交，无论如何，当查询字段值时，它将返回一个空字符串。

在继续之前，我必须说这与specs一致，即：{/ p>

  

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

以及后来：

  

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

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

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

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

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

Answer 1

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

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

所以这样......

$('input[type="number"]').focusout(function (evt) {
   if(!$.isNumeric($(this).val())){
     $(this).val("");
   }
});

Answer 2

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

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

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

Answer 3

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

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