模式属性无法正常工作

Question

我想要一个输入框，它只能有字母和数字，最小字母数为4，最多为20个。为此，我有以下代码。

<input type="text" name="sample" pattern="[a-zA-Z0-9].{4,20}" />

此模式属性阻止我提交表单。当我输入多个字母时，它会告诉我匹配所需的格式。 我究竟做错了什么？我怎样才能让这个表格只用4到20个字母的字母和数字？

Answer 1

您在模式中使用通配符.。这是匹配4至20次。尝试

<input type="text" name="sample" pattern="[a-zA-Z0-9]{4,20}" />

演示：http://jsfiddle.net/fwt2cj3o/