HTML5 验证输入只接受字母

Question

我有一个输入名字

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

我输入为： qwerqwe

我不断得到

Please enter on alphabets only. 打印出来

qwerqwe 不是应该有效吗？我现在有点困惑，不确定我在这里错过了什么。

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

原文由 code-8 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

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

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

原文由 Shrishailam Shelke 发布，翻译遵循 CC BY-SA 4.0 许可协议