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是不是有效？我现在有点困惑，不知道我错过了什么。

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

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

Answer 2

使用标题属性作为验证名称。

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

Answer 3

在你的模特面前放一个^。

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