HTML输入框不允许输入数字。

Question

现在我有一个像这样的输入框：

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

但它仍然允许输入数字。

我希望能输入名称，并在字符串包含数字时显示错误消息。我应该如何实现这个功能？

- b-m-f

---

你已经尝试过什么了吗？也许你可以添加这段代码。 - Vinc199789

这是仅仅HTML吗？还是你使用了.NET、PHP、Java或其他类型的服务器代码？ - Patrick

抱歉，格式出了问题。这应该是纯HTML验证。 - b-m-f

Answer 1

您可以使用本地的HTML5表单验证

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

对于您的特定情况，您可以使用regexp，例如pattern="[a-zA-Z]*"（样例）

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

我认为没有一种标准的方法可以覆盖每一个默认样式，但是有一些适用于特定浏览器的方法（这里）。

对于某些样式，您可以将css挂钩放在那里以进行更改参见此处

编辑：更新 fiddle。

- Mior

---

好主意，但可能不支持旧版浏览器。 - Michael Giovanni Pumo

仅支持Chrome 5+、IE10+、FF4+、Opera9.6+，不支持Safari。 - Patrick

@MichaelGiovanniPumo 一个 polyfill 应该能够兼容旧版浏览器。 - Panagiotis Kanavos

就像 Panagiotis 所说，有一些 polyfills（如 http://modernizr.com/）可以帮助你解决这个问题。 - Mior

好的，很抱歉正则表达式 "\p{L}" 无法使用。"[a-zA-Z]" 在许多语言中都会出现问题。但如果没有更好的替代方案，我想我只能坚持使用它了。 - b-m-f

Answer 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>

- Ash Win

Answer 3

你有几个选项...

无论选择哪个选项，你都会以某种方式使用正则表达式。

你可以在客户端使用 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的浏览器都支持这个，无论版本如何。

- Patrick

---

我不想在JavaScript中进行验证。我希望将其保留在HTML中，并获得像错误输入消息一样的整洁的浏览器支持。 - b-m-f

你需要使用 JavaScript 在客户端上或者某种服务器端代码来完成。HTML5 对于文本框有 pattern 属性，但像我之前说的那样…… 它只被现代浏览器支持…… 任何使用旧版浏览器如 IE9 的用户将无法正确验证。 - Patrick

对我来说没问题。支持旧版浏览器不是首要任务。 - b-m-f

啊，好的。我的问题是不允许输入数字，只能输入字母。对于数字，type="number" 应该可以解决。但还是谢谢你想要帮助我 :) - b-m-f

哦...非常抱歉...我错过了您不想要数字的事实...我以为您只想要数字。 - Patrick

Answer 4

无输入，仅允许文本：

http://www.w3schools.com/html/html_form_input_types.asp

...你可以尝试使用js + action在输入时触发，例如onkeydown

http://www.w3schools.com/jsref/event_onkeydown.asp

并通过正则表达式进行验证（仅限字母）

仅匹配字母的正则表达式

可以更好地控制在验证成功或失败时发生的情况。例如弹出警告或改变颜色等。

- Pavel Kučera