HTML5验证输入只接受字母

Question

我有一个输入框，它的标签名为firstname

<input pattern="[a-zA-Z]" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

我输入的是：qwerqwe

一直收到以下提示：

请输入字母。请打印出来。

qwerqwe难道不是有效的吗？我有点困惑了，不确定我错过了什么。

可以有人给我提供一些提示吗？

- code-8

Answer 1

您只允许输入一个字符。您忘记了加号+符号：

<input pattern="[a-zA-Z]+" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

如评论中@le_m所说，您可以写上*通配符来允许空输入：

<input pattern="[a-zA-Z]*" oninvalid="setCustomValidity('Please enter on alphabets only. ')" type="text" class="form-control" name="first_name" placeholder="Firstname">

- Marcos Pérez Gude

---

如果其他人也遇到了这个问题，我必须使用^[a-zA-Z]+才能使其正常工作。 - Hellodan

在出现错误的情况下，需要观察新的输入并重置自定义有效性：oninput="setCustomValidity('')。 - Greg

Answer 2

使用title属性来验证名称。

pattern="[A-Za-z0-9].{1,}" title="Please Enter Valid Company Name"

- Shrishailam Shelke

---

使用title属性作为验证名称。 - Shrishailam Shelke

.{1,} 的意思是它将验证至少一个或多个字符和数字。 - Shrishailam Shelke

请编辑您的帖子，以包含您对答案的任何其他信息。避免在评论中添加此信息，因为它们更难阅读并且可以更轻松地被删除。您的帖子的编辑按钮就在帖子下方。 - Suraj Rao

Answer 3

在你的模式前面加上 ^。

就像这样：^[a-zA-Z]

- Andrius

---

我的模式应该长什么样？ - code-8

^[a-zA-Z]*这个不是我的专业领域，但通常这会有效。 - Andrius

添加^没有效果，因为它已经被隐含了，参见 https://www.w3.org/TR/html5/forms.html#the-pattern-attribute - le_m