HTML 输入不允许数字答案

【问题标题】：HTML input do not allow numbersHTML 输入不允许数字
【发布时间】：2015-07-01 15:32:02
【问题描述】：

现在我有一个这样的输入字段：

<input class="form-control" type="text"/>

但它仍然允许输入数字。

我希望输入名称并希望在字符串包含数字时显示错误消息。我怎样才能做到这一点？

【问题讨论】：

你已经尝试过什么？也许您可以添加此代码。
另外...这只是 html 吗？或者您使用的是 .net 或 php 或 java 或其他类型的服务器代码？
抱歉，格式有问题。这应该是纯 HTML 验证。

标签： html input

【解决方案1】：

你有几个选择......

无论选项如何，您都将以某种形式或形式使用正则表达式。

您可以在客户端使用JavaScript...

function Validate () {

  var inputValue = document.getElementById("test").value;
  var reg = new RegExp('^\\d+$');
  var test = reg.test(inputValue);
  
  //--Do something with test--
  console.log(test);
  
}

<input id="test" class="form-control" type="text" />
<button onClick="Validate()">Validate</button>

如果它只是简单的HTML，没有服务器端代码，则需要使用JavaScript。

编辑

据我所知，所有支持JavaScript 的浏览器都支持此功能，无论版本如何。

【讨论】：

我不想在 JavaScript 中进行验证。我想将它保留在 HTML 中并获得整洁的浏览器支持，例如错误输入的消息。
您要么需要在客户端使用 javascript，要么需要使用某种服务器端代码。 HTML5 具有文本框的模式属性，但就像我说的那样……它只受现代浏览器支持……任何使用像 IE9 这样的旧浏览器的人都无法正确验证。
对我来说没问题。对旧版浏览器的支持不是优先事项。
然后用我的正则表达式 '^\\d+$' 尝试 Mori 的模式属性，这可能适用于您正在尝试做的事情。
这似乎是前面带有反斜杠的多位数字的正则表达式模式？

【解决方案2】：

这应该可以帮助您只输入字符：

$(function() {

  $('#txtNumeric').keydown(function (e) {
  
    if (e.shiftKey || e.ctrlKey || e.altKey) {
    
      e.preventDefault();
      
    } else {
    
      var key = e.keyCode;
      
      if (!((key == 8) || (key == 32) || (key == 46) || (key >= 35 && key <= 40) || (key >= 65 && key <= 90))) {
      
        e.preventDefault();
        
      }

    }
    
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <b>Enter Text:</b>
  <input type="text" id="txtNumeric" />
</div>

【讨论】：

【解决方案3】：

可以使用原生HTML5 field validation

如电子邮件验证 (fiddle)： <input type="text" title="email" pattern="[^@]+@[^@]+\.[a-zA-Z]{2,6}" />

对于您的具体情况，您可以使用像 pattern="[a-zA-Z]*" (fiddle) 这样的正则表达式

当您提交表单时，它会以红色边框突出显示以显示验证错误。在不同的浏览器中，它的行为会略有不同。

我认为没有标准的方法可以覆盖每个默认样式，但是有浏览器特定的方法可以做到这一点 (here)。

对于某些样式，您可以使用 css 挂钩以进行更改see here

编辑：更新小提琴。

【讨论】：