input元素上的Pattern属性允许空值？

Question

我要求用户给我一个至少3个字符，最多30个字符且只包含字母和数字的昵称。

<form>
    Nick: <input type="text" name="nick" pattern="[A-Za-z0-9]{3,30}">
    <input type="submit" value="Join lobby">
</form>

我遇到的问题是接受空表格 正如所料，长度为1,2或31+或包含标点符号的字符串不会通过。但如果他们只是不在框中放任何东西，那么 就被接受了。

我该如何解决这个问题？

Answer 1

添加required属性。

<input type="text" required name="nick" pattern="[A-Za-z0-9]{3,30}" required>

请记住，您仍需要在服务器端进行验证。