当在<input type =“number”/>中输入非数字值时，为什么Chrome仍然提交表单？

Question

我正在ASP.NET MVC中开发一个Web应用程序。

将视图中的字段绑定到模型中的整数属性时，MVC使用type="number"属性生成HTML，如下所示：

<input data-val="true" 
  data-val-number="The field MessageControlIdFrom must be a number."
  id="Filter_MessageControlIdFrom"
  name="Filter.MessageControlIdFrom"
  type="number"
  value="">

这没关系，Chrome认识到它正在期待一个数字，并将增量/减量控制添加到输入字段。

如果我在输入非数字值时尝试提交表单，我会简要地看到一条验证消息，我认为该消息是由Chrome生成的：

但问题是表单仍然提交并将数据发回服务器。我该如何防止这种情况发生？

更新

这似乎会影响Chrome v34和v35;但是在Firefox v30中，行为符合要求，并且由于验证错误而未提交。

正如@pawel在评论中所指出的this fiddle在Chrome v34和v35中按预期工作（它没有提交）。因此，我认为这是我的应用程序和Chrome的组合所特有的。

我将尝试创建一个简化的应用程序，以便能够重现问题。

Answer 1

我在客户端使用类似 this 的东西：（jQuery）

// Prevent NULL input and replace text.
$(document).on('change', 'input[type="number"]', function (event) {
    this.value = this.value.replace(/[^0-9]+/g, '');
    if (this.value < 1) this.value = 0;
});

// Block non-numeric chars.
$(document).on('keypress', 'input[type="number"]', function (event) {
    return (((event.which > 47) && (event.which < 58)) || (event.which == 13));
});

但您也应该始终在服务器端进行验证。

Answer 2

您应该使用HTML5 pattern属性，如下所示：

<input type="text" pattern="\d*" />

\d是数字的正则表达式，*表示它接受多个数字。

我认为这是阻止表单提交的更好方法。这肯定会奏效。

Answer 3

在此处查看此示例：http://api.jquery.com/submit/，其中用户键入值“正确”。我认为您可以做类似的事情，除了致电if(typeof $('#myTextArea') == "number")并从那里执行检查。

希望这有帮助。

Answer 4

我现在已经弄清楚为什么表格仍在提交，尽管没有输入数字。

单独的点击事件绑定到$(document).ready()上的提交按钮，如下所示：

$("#btnFilter").click(firstPage);

firstPage函数如下所示：

function firstPage() {
    $(".hiddenPager").val(1);
    $("form:first").submit();
}

我不确定这是否完全解释了，因为该功能仍在调用.submit()我认为Chrome会因为数字输入中的 abc 而无法兑现领域。但是我现在知道我需要改变什么以阻止提交。

Firefox的行为符合预期，不会提交。