只允许输入标签中没有 Javascript 的数字答案

【问题标题】：Only allow Numbers in input Tag without Javascript只允许输入标签中没有 Javascript 的数字
【发布时间】：2012-09-21 15:25:18
【问题描述】：

我还很新。我正在创建一个网页，要求用户提供他们的 ID。我希望它是必填字段，并且只允许数字。如果您能引导我朝着正确的方向前进，我将不胜感激。这是我目前所拥有的。

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<!DOCTYPE html>

<html>
<head runat="server">
  <title>Search</title>
</head>
<body>
 <div>
  <table align="center">
    <tr>
        <td class="label">
            Enter ID:
        </td>
         <td>
            <input type="text" name="UserId" id="UserId" />
        </td>
     </tr>
   </table>
  </div>
 </body>
</html>

【问题讨论】：

离题：没有 JavaScript ！！！有什么具体原因吗？不过我很想看到解决方案...
没有理由。我在网上看了，它只给了我用 javascript 的解决方案。在我看来，如果我只是在 html 中执行它会简单得多。

标签： html asp.net-mvc-3 input

【解决方案1】：

虽然可能建议通过 JS 或在服务器上进行一些更重的验证，HTML5 does support this 通过模式属性。

<input type= "text" name= "name" pattern= "[0-9]"  title= "Title"/>

【讨论】：

刚试了没用 :( 有没有机会看看这里？stackoverflow.com/questions/17999067/…
@Davo 这是一个 HTML5 属性，所以它不能在没有一些 polyfill 的旧 IE 上工作。您可以在这里查看支持：developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
@Davo 没问题。要做到那个键盘阻塞，你可以在这里看到这个代码：stackoverflow.com/a/19966612/830111
不要过于迂腐，但 OP 使用了“数字”（复数）这个词。这个答案的模式不是只允许一个数字吗？这也不允许负数或小数位。您可能想在这里寻找更彻底的答案stackoverflow.com/questions/16460773/…
如果该字段是必需的，请更新 pattern 属性以包含正则表达式的“一个或多个”量词 ([0-9+])。如果可选，您可以使用“零个或多个”([0-9*])。如果您需要允许小数，请利用 step 属性：developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…

【解决方案2】：

在 [0-9] 之后用 + 试试这个：

input type="text" pattern="[0-9]+" title="number only"

【讨论】：

+有什么用？
@Niby 因为如果你有一些验证，没有 + 只接受一个数字！

【解决方案3】：

当然，您不能完全依赖客户端 (javascript) 验证，但这不是完全避免它的理由。不管有没有它，您都必须进行服务器端验证（因为客户端可以禁用javascript）。由于您的非javascript解决方案限制，这就是您所剩下的。

因此，在提交之后，如果字段值未通过服务器端验证，客户端应该会在同一页面上结束，并带有额外的错误消息 指定请求的值格式。您还应该事先提供值格式信息，例如作为工具提示提示（title 属性）。

在 HTML 4 / XHTML 中肯定不存在被动客户端验证机制。

另一方面，在 HTML 5 中，您有两种选择：

number 类型的输入：
```
<input type="number" min="xxx" max="yyy" title="Format: 3 digits" />
```
– 仅验证范围 – 如果用户输入非数字，则提交空值
– 使用增量/减量控件增强了现场视觉效果（取决于浏览器）
pattern 属性：
```
<input type="text" pattern="[0-9]{3}" title="Format: 3 digits" />
<input type="text" pattern="\d{3}" title="Format: 3 digits" />
```
– 这使您可以完全控制格式（您可以通过regular expression 指定的任何内容）
– 没有视觉差异/增强

但在这里您仍然依赖浏览器功能，因此无论哪种情况都要进行服务器端验证。

【讨论】：

谢谢你，我需要java脚本吗？谢谢你
等一下。 HTML5 似乎提供了一些改进。稍后会报告。